Canvas drawImage layering

Question

Using a canvas to render a collection of images layered that a user can download the compiled image afterwards. However, when using image.onload it layers the order of images in terms of which loads the fastest from the CDN.

I am trying to achieve so that they are layered in terms of code line progression. Is there anyway to achieve this? I have tried async functions but haven't really been able to achieve anything. Below is the current code I have:

import React, { useRef, useEffect } from 'react';

interface CanvasProps {
    width: number;
    height: number;
    base: string;
    eyes: string;
    hat: string;
    backpack: string;
    clothes: string;
    selected: number;
}

const Canvas = ({ width, height, base, eyes, hat, backpack, clothes, selected }: CanvasProps) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    const renderImages = async (context) => {
        var bg_image = new Image();
        var base_image = new Image();
        var eyes_image = new Image();
        var hats_image = new Image();
        var backpacks_image = new Image();
        var clothes_image = new Image();

        bg_image.crossOrigin="*";
        base_image.crossOrigin="*";
        eyes_image.crossOrigin="*";
        hats_image.crossOrigin="*";
        clothes_image.crossOrigin="*";
        backpacks_image.crossOrigin="*";

        base_image.src = base;
        eyes_image.src = eyes;
        hats_image.src = hat;
        clothes_image.src = backpack;
        backpacks_image.src = clothes;

        base_image.onload = function(){ context.drawImage(base_image, 0, 0, 650, 650) }
        eyes_image.onload = function(){ context.drawImage(eyes_image, 0, 0, 650, 650) }
        hats_image.onload = function(){ context.drawImage(hats_image, 0, 0, 650, 650) }
        clothes_image.onload = function(){ context.drawImage(clothes_image, 0, 0, 650, 650) }
        backpacks_image.onload = function(){ context.drawImage(backpacks_image, 0, 0, 650, 650) }
    }

    useEffect(() => {
        if (canvasRef.current) {
            const canvas = canvasRef.current;
            if (canvasRef.current) {
                const context = canvas.getContext('2d');
                if (context) {
                    context.clearRect(0, 0, 650, 650);
                    renderImages(context);
                }
            }
        }       
    },[selected]);

    return <canvas id="canvas" ref={canvasRef} height={height} width={width} />;
};

Canvas.defaultProps = {
    width: window.innerWidth,
    height: window.innerHeight
};

export default Canvas;

Answer 1

 const getImg = (url) => { const img = new Image(); img.crossOrigin="*"; img.src = url; return new Promise((res, rej) => { img.onload = () => res(img); img.onerror = (err) => rej(err); }); } const renderImages = async (context) => { const baseImg = await getImg(base); context.drawImage(baseImg, 0, 0, 650, 650); const eyesImg = await getImg(eyes); context.drawImage(eyesImg, 0, 0, 650, 650); const hatImg = await getImg(hat); context.drawImage(hatImg, 0, 0, 650, 650); const backpackImg = await getImg(backpack); context.drawImage(backpackImg, 0, 0, 650, 650); const clothesImg = await getImg(clothes); context.drawImage(clothesImg, 0, 0, 650, 650); }

Answer 2

I would use one array image_sources instead of a the many variables you are using
(base, eyes, hat, backpack, clothes) , benefits of this approach:

• This would significantly reduce the size of your render function code.
• We can recursively call renderImages to sequentially draw all images.
• Your code is ready to handle as many image layers as the users needs.

Here is my rough prototype:

const renderImages = (context, index) => {
  if (index < image_sources.length) {
    let image = new Image();
    image.crossOrigin = "*";
    image.src = image_sources[index];
    image.onload = function() {
      context.drawImage(image, 0, 0, 650, 650)
      renderImages(context, index + 1)
    }
  }
}

useEffect(() => {
  if (canvasRef.current) {
    const canvas = canvasRef.current;
    if (canvasRef.current) {
      const context = canvas.getContext('2d');
      if (context) {
        context.clearRect(0, 0, 650, 650);
        renderImages(context, 0);
      }
    }
  }
}, [selected]);