I would like to create a background image pattern for a canvas in my svelte application. I am using the following code to create the pattern but it creates a black canvas.
let image = new Image();
image.src = 'images/background.png'
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fillRect(0, 0, canvas.width, canvas.height)
The image path is public/images/background.png
You probably have to wait for the image to load, otherwise there is nothing to draw to the canvas. Eg
const image = new Image();
image.src = 'images/background.png'
image.onload = () => {
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fillRect(0, 0, canvas.width, canvas.height)
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.