# How to load an image in an HTML canvas

> Learn how to load an image into a canvas in Node.js with the canvas package, using loadImage() which returns a promise, then rendering it with drawImage().

Author: Flavio Copes | Published: 2020-04-16 | Canonical: https://flaviocopes.com/how-to-load-image-html-canvas/

I was using the [`canvas`](https://www.npmjs.com/package/canvas) [npm](https://flaviocopes.com/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](https://flaviocopes.com/nodejs/), not in the browser. In the browser it's different.

Load the `loadImage()` function

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

Create the canvas:

```js
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:

```js
loadImage('./logo.png').then(image => {

})
```

You can also use, inside an async function:

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

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

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