An introduction to the HTML5 canvas element, contrasting it with SVG. SVG is declarative (you describe what the scene is), while canvas is imperative (you describe how to draw it step by step using JavaScript). Covers the drawing context concept, basic drawing operations like fillRect and strokeRect, and explains transformation matrices including translate, rotate, scale, and setTransform. Includes code examples showing how to draw 50 progressively transformed rectangles, and explains the cumulative nature of transformation matrix operations. Also touches on the Flash vs HTML5 debate from 2010.

12m read timeFrom beej.us
Post cover image

Sort: