In a canvas, I am loading 5 images, and in any one of the images I want to draw a different colored line at any given location. I don't know how to draw the line on top of loaded images.
I thought to draw line on top of image using image ID but that is also not working, Please suggest me some idea I am new to 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>