Chapter 49: Canvas Images
1. What is “Canvas Images” actually?
Canvas Images means using JavaScript on the <canvas> element to load, draw, position, scale, crop, rotate, flip, filter, composite, clip, or animate real photos, pictures, logos, sprites, backgrounds, or any raster image (JPG, PNG, GIF, WebP, etc.).
In Canvas, images are not HTML <img> tags — they are drawn as pixels using the drawImage() method.
You can do almost everything Photoshop does with images, but with code:
- Place a photo at any position
- Resize / scale it
- Crop only part of it
- Rotate or flip it
- Put rounded corners / circular mask on it
- Apply brightness, contrast, blur, grayscale, sepia, etc.
- Draw text or shapes on top of the image
- Animate images (sprites, slideshow, parallax, game characters)
- Use images as patterns or fill
2. Very Important First Rule (Most Common Student Mistake)
You cannot draw an image instantly — images load from the internet (or file) asynchronously.
You must wait until the image is fully loaded before drawing it.
Always use the onload event:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
const img = new Image(); img.src = 'https://example.com/photo.jpg'; img.onload = function() { // ONLY draw here — image is ready ctx.drawImage(img, 50, 50); }; |
If you try to draw before onload, nothing appears — this is the #1 reason students say “image not showing”.
3. Your First Canvas Image – Simple Photo Display (Copy-Paste & Run)
Create canvas-image-hello.html:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Images – First Example</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Images – Loading & Drawing Photos</h1> <canvas id="imageCanvas" width="800" height="500"></canvas> <script> const canvas = document.getElementById('imageCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Create image object const img = new Image(); img.crossOrigin = "anonymous"; // needed for external images (CORS) img.src = 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800'; // free landscape photo // Wait for image to load img.onload = function() { // Draw full image resized to fit canvas ctx.drawImage(img, 50, 50, 700, 400); // Add overlay text ctx.font = 'bold 50px Arial'; ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Photo on Canvas', canvas.width/2, 100); // Add border around image ctx.strokeStyle = '#2c3e50'; ctx.lineWidth = 12; ctx.strokeRect(50, 50, 700, 400); console.log('Image loaded and drawn successfully!'); }; // If image fails to load (common issue) img.onerror = function() { console.error('Image failed to load – check URL or CORS'); ctx.font = '30px Arial'; ctx.fillStyle = 'red'; ctx.fillText('Image failed to load', 350, 200); }; </script> </body> </html> |
What you see:
- A beautiful landscape photo drawn on canvas
- White overlay text
- Thick border around the image
4. All Important drawImage() Variations (With Copy-Paste Snippets)
A. Draw full image at position (x, y)
|
0 1 2 3 4 5 6 |
ctx.drawImage(img, 100, 100); // top-left corner at (100,100), original size |
B. Draw image scaled / resized
|
0 1 2 3 4 5 6 |
ctx.drawImage(img, 50, 50, 600, 400); // x, y, desired width, desired height |
C. Crop part of image (source crop + destination size)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
// Parameters: img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ctx.drawImage(img, 200, 100, // start crop at (200,100) in original image 300, 300, // crop 300×300 pixels from source 100, 100, // draw at (100,100) on canvas 500, 500 // draw it 500×500 size on canvas ); |
D. Draw image rotated (need save/restore + translate/rotate)
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.save(); ctx.translate(300, 200); // move origin to center of where we want image ctx.rotate(Math.PI / 4); // rotate 45 degrees ctx.drawImage(img, -100, -100, 200, 200); // draw centered at new origin ctx.restore(); // reset rotation & translation |
E. Draw image with rounded corners / circular mask
|
0 1 2 3 4 5 6 7 8 9 10 11 |
// First draw circular clip path ctx.beginPath(); ctx.arc(300, 200, 120, 0, Math.PI * 2); ctx.clip(); // everything after this is clipped to circle ctx.drawImage(img, 180, 80, 240, 240); // image clipped to circle |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Always wait for img.onload — drawing before load = nothing appears
- Add img.crossOrigin = “anonymous” for external images — otherwise canvas becomes “tainted” and you can’t read pixels later
- Common mistake #1: Draw image outside onload → blank canvas
- Common mistake #2: Wrong order of parameters in 9-argument drawImage → image distorted or missing
- Common mistake #3: Forget ctx.clip() reset — later drawings also get clipped
- Pro tip: Use ctx.globalAlpha = 0.7 for semi-transparent overlays on images
- Pro tip 2: Combine with getImageData() / putImageData() for pixel-level filters (blur, grayscale, etc.)
Understood Canvas Images fully now? Drawing images is one of the most powerful & most-used features in Canvas — photo editors, games (sprites), slideshows, image filters, avatars, backgrounds, everything.
Tell me what you want next — we can build on this:
- Full image cropper / editor (drag to select area)?
- Image carousel / slideshow with fade?
- Circular avatar with border + shadow?
- Canvas photo filter app (grayscale, sepia, invert)?
- Or 15-question Canvas images quiz?
Just say — we keep going step by step together! 🚀
