Canvas drawImage: Projecting Pixels onto a Canvas
drawImage is a versatile projector for your canvas, letting you place, scale, and even slice images before drawing them. It's used for rendering game sprites from a sprite sheet, displaying video frames, or compositing images.
drawImage is the canvas's all-in-one tool for rendering pixel sources, acting like a projector. It can draw an entire image, scale it to fit a new size, or slice out a sub-rectangle and place it on the canvas. This is fundamental for 2D games (drawing sprites from a sprite sheet), video processing (painting frames to a canvas), or creating dynamic image compositions. The main footgun is confusing the source rectangle (sx, sy, sWidth, sHeight) with the destination rectangle (dx, dy, dWidth, dHeight), leading to unexpected clipping or scaling.
Read the original → developer.mozilla.org
- #canvas
- #web apis
- #graphics
- #javascript
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.