En un lienzo, estoy cargando 5 imágenes, y en cualquiera de las imágenes quiero dibujar una línea de color diferente en cualquier ubicación determinada. No sé cómo dibujar la línea encima de las imágenes cargadas.
Pensé en dibujar una línea en la parte superior de la imagen usando la identificación de la imagen, pero eso tampoco funciona. Por favor, sugiérame alguna idea. Soy nuevo en HTML.
<!DOCTYPE html> <html> <body> <canvas canvas id="Mcanvas" width="5000" height="5000"></canvas> <script> var canvas = document.getElementById('Mcanvas'); var context = canvas.getContext('2d'); // MAIN SECTION HTML CODE function loadimages(sources,callback){ var images={}; var loadedImages=0; var numImages=0; for (var src in sources){ numImages++; } for (var src in sources){ images[src] = new Image(); images[src].onload=function(){ if(++loadedImages>=numImages){ callback(images); } }; images[src].src=sources[src]; } } var sources ={ img1 : "./a.jpg", img2 : "./c.jpg", img3 : "./s.jpg", img4 : "./d.jpg", img5 : "./e.jpg" }; loadimages(sources,function(images){ context.drawImage(images.img1,0,0); context.drawImage(images.img2,220,0); context.drawImage(images.img3,440,0); context.drawImage(images.img4,660,0); context.drawImage(images.img5,880,0); }); </script> </body> </html>