1

I have an image and I want to draw on it. To do that, I use jQuery to hide the image:

$("img").hide();

And then I create a canvas and put it in the same div with id drawing in the html. I then set the background of the canvas to be the same as the img src for the image I hid. This makes it look like an image but now it is actually a canvas with the image as it's background. I do this by:

$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();

The issue I am having is that sometimes, the image isn't displayed in the canvas and the canvas is not the size of the image. I think it's probably because of some loading issue. How can I wait for the canvas to have the image displayed in the background for sure? Thank you

Edit: Note that in the DOM, the canvas always has the right src. It just doesn't display it

Edit 2: Here's the JSfiddle. Here, everything seems fine but I have a lot more going on in my code including fetching stuff from the server so it's slower there. Hope this helps you guys to understand the problem: http://jsfiddle.net/wL3ezLke/2/ Thanks again

Random101
  • 11
  • 2
  • `$(".image img")` and `$("img")` would be Array like Objects of images. You have to get a single `src`, `width`, and `height`. Use the `$(selector).each()` method, or be more specific with your jQuery. – StackSlave Oct 30 '14 at 22:02
  • Wild guess, because "the image isn't displayed in the canvas and the canvas is not the size of the image" -> instead document.ready, use window.load function. http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load – sinisake Oct 30 '14 at 22:15
  • @PHPglue I do not agree, we cannot know for sure here that there are more than one `.image` css class used. I do agree however that he should indeed use better jquery selectors to ensure the code won't be broken while adding other `.image` elements. – Vadorequest Oct 30 '14 at 22:15
  • @nevermind I tried that. But that loads the image, not the one on my canvas background – Random101 Oct 30 '14 at 22:17
  • @PHPglue I only have one image class and one image shown at a time. I can go to another image in which case the server will fetch it, the page will be refreshed, script will be loaded and then i will call the function to replace the image with the canvas. – Random101 Oct 30 '14 at 22:19
  • Try setting the `height` and `width` before setting the background. – StackSlave Oct 30 '14 at 23:03

3 Answers3

0

You need to use:

$(function(){
  // Code executed once the DOM is loaded.
});

Official documentation: https://api.jquery.com/ready/

Vadorequest
  • 16,593
  • 24
  • 118
  • 215
0

If I understand correctly your problem is knowing when the image loaded (from what you describe it could be a lot of other problems though).

To test if an image has loaded it's pretty simple.

 var $img = $('#hiddenImg');
 if ($img[0].complete) doCanvasStuff();
 else {
      $img.on('load', function(e) {
         var $canvas = $('#drawCanvas');
          $canvas.css({width: $img.width(), height: $img.height()});
          //you can go ahead with the background image, but this is preferable
          var ctx = $canvas[0].getContext("2d");     
          ctx.drawImage(img,0,0);
      }
  }

This should make sure you canvas loads an image only after it was loaded, or do canvas stuff right away if image was loaded, fiddle

PiniH
  • 1,901
  • 13
  • 20
  • I don't know why but this doesn't add anything to the canvas for me. It just puts the image there and a canvas that's empty. – Random101 Oct 30 '14 at 22:29
  • Make sure you set the dimensions before calling drawContext: [fiddle](http://jsfiddle.net/wL3ezLke/3/) – PiniH Oct 30 '14 at 22:33
0

Change

$('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');
context.canvas.width = $("img").width();
context.canvas.height = $("img").height();

to

 context.canvas.width = $("img").width();
 context.canvas.height = $("img").height();
 $('#drawing > canvas').css('background-image','url('+$(".image img").attr('src')+')');

so the height and width are set before the image goes into the background.

StackSlave
  • 10,613
  • 2
  • 18
  • 35