Unexpected call to method or property access while drawing svg image onto canvas in IE

Question

i am trying to draw an svg image on a canvas like this:

var canvas = document.createElement("canvas");
canvas.width=w;
canvas.height=h;
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = src;
img.onload = function(e)
{
    ctx.drawImage(img, 0, 0, w, h);
}

it works fine on chrome, but in IE (v11 as of this writing) it gives a Unexpected call to method or property access error intermittently.

i have a sample jsfiddle here. note you may have to run the fiddle a couple of times, but you will run into the error eventually.

What is the problem and how can i fix it?

Answer 1

We had same kind of a problem. In the end, kicking drawImage out of the thread with setTimeout() helped. What the problem was, i have no answer, the most logical seems to be that sometimes img is not really ready when load event fires. Go figure.