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();