Working with Images and Text
Draw images and styled text on canvas.
Loading an Image
Canvas draws from an HTMLImageElement. Create an Image, set its src, and wait for onload before drawing — the pixels are not available until then.
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";drawImage Basics
drawImage(img, dx, dy) paints the image at the given position at its natural size.
img.onload = () => {
ctx.drawImage(img, 20, 20);
};All lessons in this course
- Setting Up the Canvas Context
- Drawing Shapes and Paths
- Working with Images and Text
- Animation with requestAnimationFrame