Just like debugging any other thing, doing the same for websocket traffic can be really useful. Not sure if firebug does that, but inspecting your websocket traffic in chrome dev tools is definitely possible.
Ever wanted to add a magnifying glass effect to your product images for an awesome zoom-in and a great user experience ? You’ll be surprised to know that using CSS3 and jQuery, it’s really easy to integrate this effect to your website or webapp.
The specs have always been in a state of flux. But it seems to be decided on the CSS3 linear and radial gradients syntax finally (hopefully). Let’s just discuss the changes and how you’ll need to modify your current/old code accordingly.
In the previous post we kicked off with our painting application using HTML5 canvas. If you remember well, we ended up with a basic app where one can easily draw lines or something else with a “pencil” tool. But there was a problem. When drawing different shapes like circles, the lines/curves had jagged edges. They were not smooth or anti-aliased, whatever you want to call them. This article will aim towards solving those issues.
Creating curves in HTML5 Canvas is usually achieved with
quadraticCurveTo() that has 1 control point or
bezierCurveTo() that has 2 control points. In some cases, it might be highly desirable to control the point that the curve hits when drawing with
quadraticCurveTo. It is pretty simple, but can be a bit tricky. All it requires, is a little formula that we’ll see in a bit.
If you use the
height() function, you’ll get the size that you see in the browser. Getting the actual dimension (native or natural width/height) of the image is actually quite easy. Let’s see how.
Let’s build a simple painting (or sketching) application using HTML5
Continue reading “Creating a Paint Application with HTML5 Canvas”