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)