Tag Archives: Bezier

Dragging/Moving shapes smoothly using Canvas 2d APIs


Did you ever write code to drag or move shapes using Canvas 2d APIs? If you did, then didn’t you ever face a situation (an unexpected behaviour) when you drag or move a shape (e.g. circle, rectangle, image, Bezier cubic/quadratic curve, etc.)?

This post helps you write code to drag or move shapes as smoothly and accurately as possible using HTML5 Canvas 2d APIs.

Read full blog post

Dragging-or-Moving-Shapes-smoothly-using-HTML5-Canvas-2D-APIs

Curvature: HTML5 Canvas Curves Generator/Tool


Today I am happy to announce the release of Curvature: a tool lets you design curves using Canvas 2d APIs!

Curvature lets you draw unlimited Bezier curves and also generates exact code for you in two formats:

1) Absolute Coordinates

context.moveTo(200, 300);

context.bezierCurveTo(200, 300, 400, 500, 600, 700);

These are absolutely positioned points/coordinates.

Now let’s make an assumption: you had drawn one hundred (100) curves. Could you easily move all curves (as they are) on any portion of the screen?

The answer is: No, never. Not so easy!

Why it is not easy to move absolutely positioned coordinates on the screen?

You are drawing Bezier curves; not a simple line, arc or rectangle! For Bezier curves you have to understand its two control points and one ending point.

Canvas 2d API for Bezier curve looks like this:

CanvasRenderingContext2D.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y);

So what is the solution? The solution is relative positioned coordinates. If you had drawn hundreds of thousands of curves; no matter; Curvaturewill do all job for you!

2) Relative Coordinates

/* First curve where we set default values for x and y ! */

/* All subsequent curves will be extracted from these two objects! */

context.moveTo( x = 359, y = 319 );

context.bezierCurveTo( x + 25, y – 164, x + 191, y – 169, x + 285, y – 57 );

// Second Curve

context.moveTo( x , y  );

context.bezierCurveTo( x + 25, y – 164, x + 157, y + 51, x + 285, y – 57 );

// Third Curve

context.moveTo( x , y  );

context.bezierCurveTo( x + 25, y – 164, x + 234, y – 256, x + 285, y – 57 );

As you saw in the above code; when we call context.moveTo Canvas 2d API first time; we initialize default position for two variables or objects: x and y.

All subsequent values/points are relative to these two objects.

Changing them will affect all others accordingly.

How relative positioned coordinates can helps me?

Just copy auto generated code and you have to change only two points or coordinates or values:

x = e.pageX    // or whatever

y = e.pageY      // or whatever

Curvature auto-generates code for you! – Just copy and you are done!

Just draw more than one Bezier curves copy auto-generated code and you are done! Happy!!!

Try the tool:

https://canvature.appspot.com/

Just try! – Don’t hesitate to feedback! – You are most welcome!

You feedback may help me bring something better!