When working with the canvas
npm package to draw images server-side using the Canvas API, you may need to load an image onto the canvas. Here’s a step-by-step guide on how to achieve this in Node.js:
- Start by loading the
loadImage()
function from thecanvas
package:
const { createCanvas, loadImage } = require('canvas');
- Create the canvas with the desired width and height:
const width = 1200;
const height = 630;
const canvas = createCanvas(width, height);
const context = canvas.getContext('2d');
- Call the
loadImage()
function and handle the promise returned when the image is loaded:
loadImage('./logo.png').then(image => {
// Image loaded successfully, you can now proceed with drawing on the canvas
});
- Alternatively, if you are working within an async function, you can use the
await
keyword to simplify the code:
const image = await loadImage('./logo.png');
- Once you have the loaded image, you can use the
drawImage
method to place it on the canvas. Provide the image, along with the desired x and y coordinates, width, and height:
context.drawImage(image, 340, 515, 70, 70);
Please keep in mind that this approach is specific to loading images in a canvas on the server-side with Node.js. The process may differ when working with images in a browser environment.
Tags: image loading, canvas API, Node.js, loadImage, drawImage