Question

I am accessing an image from a folder in localhost.

Image loads correctly in img tag. But, when I try to draw that image onto canvas, it doesn’t appear!

I have implemented it such that when image is dropped onto the canvas, it is drawn onto it and I draw it by getting the image from original source. When I drag again and again, then, after some attempts, it appears.

The functionality is working perfectly in Firefox and I.E.

This is the source of my image on localhost:

b.src = "http://localhost/casema...E/2780Chrysanthemum.jpg"

ctx1.drawImage(b, x2-15*z, y2-15*z, w1, h1 );

Answer 1

In HTML5, it not for sure that an image will always load immediately, so you
need to make sure that the image has fully loaded beford you draw it. this code may help you :

var myImage = new Image();
myImage.src = "path/to/your/image";
myImage.onload = function(){
      //context is the canvas context 
      context.drawImage(myImage,x,y,weight,height);
}