Mozilla Canvas Samples.

var ctx = gfx;

ctx.noLine()
   .fillColor( color(200,0,0) )
   .rectangle(10, 10, 55, 50)
   .fillColor( color(0, 0, 200, 0.5) )
   .rectangle(30, 30, 55, 50);
      
var ctx = gfx;

ctx.fillColor(color("red"))
   .lineWidth(1)
   .lineColor(color(0,0,0));

var path = new Graphics.Path();

path.moveTo(30, 30)
    .lineTo(150, 150)
    .bezierCurveTo(60, 70, 60, 70, 70, 150)
    .lineTo(30, 30)
    .close();

ctx.drawPath(path);
      
var ctx = gfx;

function drawBowtie(fillColor) {

  ctx.fillColor(color(200,200,200,0.3));
  ctx.rectangle(-30, -30, 60, 60);
  
  ctx.fillColor(fillColor);

  var path = new Graphics.Path();
    path.moveTo(25, 25)
        .lineTo(-25, -25)
        .lineTo(25, -25)
        .lineTo(-25, 25)
        .close();
  ctx.drawPath(path);
}

function dot() {
  ctx.save();
    ctx.fillColor(0);
    ctx.rectangle(-2, -2, 4, 4);
  ctx.restore();
}

// note that all other translates are relative to this
// one
ctx.translate(45.5, 45.5);

ctx.lineWidth(1)
   .lineColor(color(0,0,0));

ctx.save();
//ctx.translate(0, 0); // unnecessary
 drawBowtie(0xFF); //"red"
 dot();
ctx.restore();

ctx.save();
 ctx.translate(85, 0);
 ctx.rotate(45 * Math.PI / 180);
 drawBowtie(0x00FF00); //"green"
 dot();
ctx.restore();

ctx.save();
 ctx.translate(0, 85);
 ctx.rotate(135 * Math.PI / 180);
 drawBowtie(0xFF0000); //"blue"
 dot();
ctx.restore();

ctx.save();
 ctx.translate(85, 85);
 ctx.rotate(90 * Math.PI / 180);
 drawBowtie(color(0xFF,0xFF,0)); //"yellow"
 dot();
ctx.restore();