Skip to content

How to load an image in an HTML canvas

I was using the canvas npm package to draw an image server-side using the Canvas API.

Note: this is how to work with images in a canvas in Node.js, not in the browser. In the browser it’s different.

Load the loadImage() function

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 => {

})

You can also use, inside an async function:

const image = await loadImage('./logo.png')

Once you have the image, call drawImage and pass it with the x, y, width and height parameters:

context.drawImage(image, 340, 515, 70, 70)
→ Get my JavaScript Beginner's Handbook

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list