HtmlHow-ToBeginner · 3 min read

How to Draw Image on Canvas in HTML5: Simple Guide

To draw an image on a canvas, first create an Image object and set its src. Then use the canvas context's drawImage() method inside the image's onload event to draw it on the canvas.

📐

Syntax

The main method to draw an image on a canvas is drawImage(). It belongs to the canvas 2D context and has several forms:

context.drawImage(image, dx, dy): Draws the image at position (dx, dy).
context.drawImage(image, dx, dy, dWidth, dHeight): Draws and scales the image to the given width and height.
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): Draws a cropped part of the image defined by source rectangle (sx, sy, sWidth, sHeight) to the destination rectangle on canvas.

Here, image is an HTMLImageElement or similar, dx and dy are destination coordinates on the canvas.

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = () => {
  ctx.drawImage(img, 0, 0); // Draw at top-left corner
};

💻

Example

This example shows how to load an image and draw it on a canvas at position (50, 50) with size 200x150 pixels.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Draw Image on Canvas</title>
  <style>
    canvas {
      border: 1px solid #ccc;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300" aria-label="Canvas showing an image"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    img.src = 'https://via.placeholder.com/400x300.png?text=Sample+Image';
    img.onload = () => {
      ctx.drawImage(img, 50, 50, 200, 150);
    };
  </script>
</body>
</html>

Output

A 400x300 canvas with a placeholder image drawn inside it at coordinates (50, 50) sized 200 pixels wide and 150 pixels tall, visible with a light gray border.

⚠️

Common Pitfalls

Drawing before image loads: Trying to draw the image before it finishes loading will show nothing. Always use img.onload to wait.
Wrong image path: If the src is incorrect, the image won't load and nothing will draw.
Canvas size too small: If the canvas is smaller than the drawn image, parts will be clipped.
Not getting 2D context: Forgetting getContext('2d') means you can't draw.

javascript

/* Wrong way: drawing before image loads */
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'https://via.placeholder.com/150';
ctx.drawImage(img, 0, 0); // This runs immediately, image not loaded yet

/* Right way: wait for image to load */
img.onload = () => {
  ctx.drawImage(img, 0, 0);
};

📊

Quick Reference

Tips for drawing images on canvas:

Always wait for the image to load using img.onload.
Use drawImage() to place and scale images.
Set canvas size in HTML or CSS to control drawing area.
Use semantic HTML and aria-label for accessibility.

✅

Key Takeaways

Use the canvas 2D context's drawImage() method to draw images.

Always wait for the image to load before drawing it on the canvas.

Set the canvas size properly to avoid clipping your image.

Use semantic HTML and accessibility attributes for better user experience.