Author: Rishabh

Calculate Control Point to Make Your Canvas Curve Hit a Specific Point

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.

Continue reading “Calculate Control Point to Make Your Canvas Curve Hit a Specific Point”

Get the Original Width and Height of an Image

If you use the width and height properties of the image node (vanilla Javascript) or use jQuery’s width() or 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.

Continue reading “Get the Original Width and Height of an Image”

Creating a Paint Application with HTML5 Canvas

Let’s build a simple painting (or sketching) application using HTML5 <canvas> element along with its Javascript API. Although the app will be small, there’s going to be quite a bit of information for intake. So I’ll break the entire process into different tutorials (posts).
Continue reading “Creating a Paint Application with HTML5 Canvas”