Loading and drawing images on a canvas is a common task, whether you’re building a game, creating a photo editor, or generating graphics.

Loading images in the browser

In the browser, you need to create an Image object and wait for it to load before drawing it to the canvas.

First, get a reference to your canvas and create a context:

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')

Then create an image and set its source:

const image = new Image()
image.src = './logo.png'

You must wait for the image to load before drawing it. Use the onload event:

image.onload = () => {
  context.drawImage(image, 0, 0)
}

Or use a Promise-based approach:

const loadImage = (src) => {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.onload = () => resolve(image)
    image.onerror = reject
    image.src = src
  })
}

const image = await loadImage('./logo.png')
context.drawImage(image, 0, 0)

The drawImage method

The drawImage() method can be called with different numbers of arguments:

Basic usage: position only

context.drawImage(image, x, y)

This draws the image at coordinates (x, y) at its natural size.

With width and height

context.drawImage(image, x, y, width, height)

This draws the image at (x, y) and scales it to the specified width and height:

context.drawImage(image, 340, 515, 70, 70)

With source cropping

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

This allows you to crop a portion of the source image and draw it at a specific size:

• sx, sy - The x and y coordinates of the top-left corner of the source rectangle
• sWidth, sHeight - The width and height of the source rectangle
• dx, dy - The x and y coordinates on the canvas to draw the image
• dWidth, dHeight - The width and height to draw on the canvas

Loading images in Node.js

When using the canvas npm package in Node.js, the approach is different.

Load the loadImage() function from the package:

const { createCanvas, loadImage } = require('canvas')

Create the canvas:

const width = 1200
const height = 630

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

Then call loadImage(), which returns a promise when the image is loaded:

loadImage('./logo.png').then(image => {
  context.drawImage(image, 340, 515, 70, 70)
})

You can also use async/await:

const image = await loadImage('./logo.png')
context.drawImage(image, 340, 515, 70, 70)

Example: Centering an image on the canvas

const canvas = document.querySelector('canvas')
const context = canvas.getContext('2d')

const image = new Image()
image.src = './photo.jpg'

image.onload = () => {
  const x = (canvas.width - image.width) / 2
  const y = (canvas.height - image.height) / 2
  context.drawImage(image, x, y)
}

Example: Scaling an image to fit the canvas

image.onload = () => {
  const scale = Math.min(
    canvas.width / image.width,
    canvas.height / image.height
  )
  const x = (canvas.width - image.width * scale) / 2
  const y = (canvas.height - image.height * scale) / 2
  
  context.drawImage(
    image, 
    x, y, 
    image.width * scale, 
    image.height * scale
  )
}

Lessons in this unit:

0:	Introduction
1:	Getting started with HTML Canvas
2:	▶︎ Loading and drawing images on canvas
3:	Writing text on canvas