Category: Tools & Tips

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”