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 %}