Estoy creando un sitio web que permite a los usuarios dibujar bocetos y especificar sus posiciones y tamaños; luego, los guardo en una base de datos. En una ruta diferente, quiero cargar estas imágenes y mostrarlas en un solo lienzo.

Hago uso de la función drawImage para esto, pero lo que sucede es que la segunda imagen se dibuja sobre la primera imagen. Como en la siguiente imagen los dos bocetos de un circle y un triangle :

Así es como dibujo las imágenes en el lienzo:

 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); }; } }

El formato de cadena aquí convierte los datos obtenidos de la base de datos (a través de Flask) en una matriz de JavaScript. He usado console.log() en todas las variables como img , tx , ty , tw , th y todas tienen los valores deseados, pero aún en el lienzo no se dibujan correctamente, así que no pude reducir el problema.

Así es como llamo a la función en el archivo HTML:

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