HTML5 <canvas> bezierCurveTo command generator

Based on code by Victoria Kirst (the clever bits) that allows you to draw a shape using vector curves, and my bit (not so clever) that allows you to position and scale it on a canvas.

Copy the resulting text output and paste it into your html5 code as a function.
Call the function passing suitable parameters to place the shape where you want it.

drawShape(ctx, xoff, yoff, sw, sh, fi, st)

drawShape = the function name
ctx = the canvas context
xoff = the horizontal centre of the shape
yoff = the vertical center of the shape
sw = the horizontal scale of the shape
sh = the vertical scale of the shape
fi = draw a fill true/false
st = draw a stroke true/false


The centre of the shape (xoff and yoff) matches the crosshairs on the drawing area (600w x 500h) so draw your shape accordingly.
You can tweak the horizontal and vertical scale in the function parameters.
If you want a closed shape, make the first x and y coordinates match the very last 'by hand', in the resulting function code.
You can simply manually increment a number on the end of the name of each shape function to allow multiple shapes on a canvas (or rename it completely). Keep the same centre point for all shapes if you want the finished 'composite image' to resize easily.

Image example made up of eleven shapes - dog.html. This was achieved by loading a drawing of the dog as a guide, so each individual shape was drawn over it relative to the centre.

Example Code:


drawShape3(context1, 320, 278, 1.5, 1.5, true, true);

function drawShape3(ctx, xoff, yoff, sw, sh, fi, st) {
  ctx.moveTo(xoff - 28*sw, 71*sh + yoff);
  ctx.bezierCurveTo(xoff - 20*sw, 71*sh + yoff, 55*sw + xoff, 71*sh + yoff, 75*sw + xoff, 71*sy + yoff);
  ctx.bezierCurveTo(89*sw + xoff, 71*sh + yoff, 89*sw + xoff, 93*sh + yoff, 74*sw + xoff, 93*sy + yoff);
  ctx.bezierCurveTo(59*sw + xoff, 93*sh + yoff, xoff - 13*sw, 94*sh + yoff, xoff - 28*sw, 94*sy + yoff);
  ctx.bezierCurveTo(xoff - 41*sw, 94*sh + yoff, xoff - 41*sw, 72*sh + yoff, xoff - 28*sw, 71*sy + yoff);
  if (fi==true){
  if (st==true){

Path Edit Modes

Trace Path Over Image