0

Im trying to create an image using canvas api. The problem is the image isnt loading no matter what I try, here is my code snippet, Im waiting for the image to load but the generated image doesnt have a background. Can anyone spot what I've done wrong? Thanks in advance:


const backgroundImage = new Image();
    backgroundImage.src = '../Assets/pattern.png';

    return (backgroundImage.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;

        if (!ctx) {
            return '';
        }

        ctx.drawImage(backgroundImage, 0, 0, width, height);

        ctx.fillRect(0, 0, width, height);
        ctx.font = 'bold italic 48px Montserrat';
        ctx.fillStyle = 'white';


        return canvas.toDataURL('image/png');
    });

I've tried different import styles, I've tried using other image sources (unsplash) but no luck

S.L
  • 11
  • 1
  • What are you returning from? You need to use callbacks or promises; you seem to be attempting to [de-async the code](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). That won't work. Maybe try to adapt [this example](https://stackoverflow.com/a/66180709/6243352).. – ggorlen Jan 08 '23 at 20:02

0 Answers0