HTML canvas bezierCurveTo buidler

There are a few things about HTML5 drawing, that can be very difficult to program, especially if you don’t have a way to visually build it.  Drawing diagrams with a move to and line to, can be handled simply with a sheet of graph paper, or as I do, just imagine it, but drawing with curves is much less simple.

Thankfully, Victoria Kirst has taken the time to create a visual took for building lines using bezierCurveTo!

Here is the tool

Here is a shape I made with it:

function drawShape(ctx, xoff, yoff) {
ctx.beginPath();
ctx.moveTo(39 + xoff, 81 + yoff);
ctx.bezierCurveTo(40 + xoff, 138 + yoff, 104 + xoff, 135 + yoff, 119 + xoff, 135 + yoff);
ctx.bezierCurveTo(198 + xoff, 137 + yoff, 234 + xoff, 163 + yoff, 234 + xoff, 178 + yoff);
ctx.bezierCurveTo(234 + xoff, 178 + yoff, 253 + xoff, 140 + yoff, 299 + xoff, 140 + yoff);
ctx.bezierCurveTo(357 + xoff, 140 + yoff, 336 + xoff, 143 + yoff, 372 + xoff, 141 + yoff);
ctx.bezierCurveTo(387 + xoff, 140 + yoff, 422 + xoff, 151 + yoff, 423 + xoff, 84 + yoff);
ctx.stroke();
}

This is a super useful tool!