Graphics
Get flash to fully experience Pearltrees
// Creates canvas 320 × 200 at 10, 50 var paper = Raphael( 10 , 50 , 320 , 200 ); // Creates circle at x = 50, y = 40, with radius 10 var circle = paper.circle( 50 , 40 , 10 ); // Sets the fill attribute of the circle to red (#f00) circle.attr( "fill" , "#f00" ); // Sets the stroke attribute of the circle to white circle.attr( "stroke" , "#fff" );
Raphaël—JavaScript Library
Canvas Pad
// Draw black rect ctx.fillRect(50, 20, 145, 145); // Draw blue rect ctx.fillStyle = "rgb(0, 162, 232)"; ctx.fillRect(135, 85, 125, 125); // Increase line width ctx.lineWidth = 5; // Draw black rect outline ctx.strokeStyle = "rgb(0, 0, 0)"; ctx.strokeRect(50, 335, 145, 145); // Draw blue rect outline ctx.strokeStyle = "rgb(0, 162, 232)"; ctx.strokeRect(135, 275, 125, 125); // Draw transparent yellow rect ctx.fillStyle = "rgba(255, 255, 0, 0.75)"; ctx.fillRect(210, 180, 125, 125);