Raphaël—JavaScript Library. SVG–oids. The United Nations Systems Organization Chart. EaselJS: A Javascript Library for Working with the HTML5 Canvas Element. Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added Graphics.store() / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries.
By b10b b10b. Canvas Pad. Rectangles (simple shapes) HTML Canvas 2D Context specification: Section 8 Simple shapes (rectangles) context.clearRect(x, y, w, h) Clears all pixels on the canvas in the given rectangle to transparent black. context.fillRect(x, y, w, h) Paints the given rectangle onto the canvas, using the current fill style. context.strokeRect(x, y, w, h)) Paints the box that outlines the given rectangle onto the canvas, using the current stroke style. // 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); context.arc(x, y, radius, startAngle, endAngle, anticlockwise) context.clip()