I am trying to figure out why the classic way of image preloading before drawing in canvas is firing a "Type error" on chrome.
Let's see the situation:
I try to preload images in 3 different ways:
- creating a new Image() instance
- creating an image element
- creating a jQuery image object
Or if you prefer some code:
var canvas1 = document.getElementById('canvas-1'),
context1 = canvas1.getContext('2d'),
image1 = new Image(),
canvas2 = document.getElementById('canvas-2'),
context2 = canvas2.getContext('2d'),
image2 = document.createElement('img'),
$canvas3 = $('#canvas-3'),
context3 = $canvas3.get(0).getContext('2d'),
$image3 = $('<img>'),
loadImage = function (image, context, debugIndice) {
debugIndice = debugIndice || -1;
image.onload = function () {
try {
context.drawImage(this, 0, 0, 100, 100);
}
catch (e) {
console.log('error for debugIndice', debugIndice, e, this);
}
}
image.src = "http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png";
};
loadImage(image1, context1, 1);
loadImage(image2, context2, 2);
loadImage($image3.get(0), context3, 3);
Please watch the Fiddle here.
I only have a Type error for the first loadImage call.
I am using Google Chrome 27.0.1453.94 on Windows at my company, and Google Chrome 27.0.1453.93 on Mac OS X, both x64 platforms.
This code works fine in Firefox, and even IE9 (I'm not kidding, I swear it)
Does someone knows about this Image() class problem in Chrome ?
EDIT: Here is a screen of the bug:
You can watch it on real size here.
This is not a big problem, anyway I will use the jQuery way, but I am really curious to see what is the cause, and why did I lose some time trying to fix it!
I took a look at this bug.
I am still asking as I am not sure that it is the same ?!