Geek Answers Handbook

Canvas Image does not display in Chrome (works in FF4 and IE9)

I'm at a dead end. For my life, I have no idea why this is not working in Chrome. You can see the code here:

http://jsfiddle.net/corydorning/NgXSH/

When I pull this code in FF or IE9, it works fine. You will notice that the fiddle will work in Chrome with the rendered element, but it will NOT work outside the script.

Any help is appreciated. This is my first attempt with a canvas.

+4
source share
2 answers

The problem is that you do not wait for the original image element to load. If you change it a little, it works fine:

$(function() { var canvas = document.createElement('canvas'), canvasExists = !!(canvas.getContext && canvas.getContext('2d')), oImage = $('img')[0]; if (canvasExists) { var context = canvas.getContext('2d'), img = new Image(); img.onload = function() { canvas.height = img.height; canvas.width = img.width; $(oImage).replaceWith(canvas); context.drawImage(oImage, 0, 0); } img.src = oImage.src; } else { // apply MS filters }
+4
source

It is difficult to use img.onload if you have a lot of them. A simple way in chrome to wait for an image to load is to use:

 $(window).load(function () {

instead

 $(document).ready(function () {

like $ (window) .load is really waiting for the whole image to load.

It works great for using images in canvas. (work also in firefow and IE)

0
source

More articles:


All Articles