How to draw multiple images to a single canvas?-CodePudding

I am making a website that lets users draw sketches and specify their positions and sizes; then, I save them to a database. In a different route, I want to load these images and display them on a single canvas.

I make use of the drawImage function for this, but what happens is that the second image gets drawn over the first image. Like in the following picture the two sketches of a circle and a triangle:

Here's how I draw the images on the canvas:

var canvas = document.getElementById("paint");    
var ctx = canvas.getContext("2d");
function loadImages(data, targetX, targetY, targetWidth, targetHeight) {

    data = data.replace(/'/g, '"');
    targetX = targetX.replace(/'/g, '"');
    targetY = targetY.replace(/'/g, '"');
    targetWidth = targetWidth.replace(/'/g, '"');
    targetHeight = targetHeight.replace(/'/g, '"');

    data = JSON.parse(data);
    targetX = JSON.parse(targetX);
    targetY = JSON.parse(targetY);
    targetWidth = JSON.parse(targetWidth);
    targetHeight = JSON.parse(targetHeight);

    for(var i = 0; i < data.length; i  ) {
        var img = new Image();
        var tx = parseInt(targetX[i]);
        var ty = parseInt(targetY[i]);
        var tw = parseInt(targetWidth[i]);
        var th = parseInt(targetHeight[i]);
        img.src = data[i];
        img.onload = function() {
            ctx.drawImage(this, tx, ty, tw, th);
        };

        
    }

}

The string formatting here converts the data obtained from the database (through Flask) to a JavaScript array. I have used console.log() on all the variables like img, tx, ty, tw, th and all of them have the desired values, but still on the canvas they are not getting drawn properly so I couldn't narrow down the problem.

Here's how I call the function in the HTML file:

{% block content %}
{% if files %}

<button id="show" onclick="loadImages(`{{ data }}`, `{{ targetX }}`, `{{ targetY }}`, `{{ sizeX }}`, `{{ sizeY }}`)">View</button>

<canvas id="paint" width="512" height="512" style="border: 5px solid #000000;"></canvas>
{% endif %}
    
<script src=" {{ url_for('static', filename='edit.js') }}"></script>

{% endblock %}

CodePudding user response：

You're doing async things in a sync loop. Try this..

var canvas = document.getElementById("paint");
var ctx = canvas.getContext("2d");

async function loadImages(data, targetX, targetY, targetWidth, targetHeight) {
  var images = {};
  data = data.replace(/'/g, '"');
  targetX = targetX.replace(/'/g, '"');
  targetY = targetY.replace(/'/g, '"');
  targetWidth = targetWidth.replace(/'/g, '"');
  targetHeight = targetHeight.replace(/'/g, '"');

  data = JSON.parse(data);
  targetX = JSON.parse(targetX);
  targetY = JSON.parse(targetY);
  targetWidth = JSON.parse(targetWidth);
  targetHeight = JSON.parse(targetHeight);

  for (var i = 0; i < data.length; i  ) {
    var tx = parseInt(targetX[i]);
    var ty = parseInt(targetY[i]);
    var tw = parseInt(targetWidth[i]);
    var th = parseInt(targetHeight[i]);
    var img = await loadImage(data[i]);
    ctx.drawImage(img, tx, ty, tw, th);
  }

}

function loadImage(src){
  return new Promise(done=>{
    var img = new Image();
    img.src = src;
    img.onload = function() {
      done(img);
    };
  });
}