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