Draw SVG image on Canvas context - by JonasLewin

Status : 

  By Design<br /><br />
		The product team believes this item works according to its intended design.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.

ID 809823 Comments
Status Closed Workarounds
Type Bug Repros 2
Opened 11/27/2013 4:18:22 AM
Access Restriction Public


We try to call drawImage on a CanvasRenderingContext2D object, and our first parameter is a base64 encoded SVG image.
This works fine in IE 10, does not work in IE11.

The call looks like this:
context.drawImage(myImg, 0, 0, 22, 22);

myImg object looks like this: (the data has been truncated).
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxu.........9zdmc+"></img>

The error message we receive is:
"Unexpected call to method or property access."

This call works just fine in IE11 when the embedded image is a PNG image, but not when it is an SVG image.
Sign in to post a comment.
Posted by dos burros on 1/19/2015 at 12:49 PM
What is strange to me is that my application is interactive, drawing objects over the SVG image... And sometimes I will draw the image, get the exception, then some action in the application causes another draw and it will succeed. With the same image object and canvas.
Posted by dos burros on 1/19/2015 at 12:38 PM
Agreed, I am seeing this exception inconsistently. The SVG images are NOT cross-origin, and the exception occurs regardless of the crossOrigin attribute or the CORS headers returned.
Posted by Bug Slayer on 11/1/2014 at 2:43 AM
The cross origin theory doesn't match the behavior I am seeing either. SVG images from the same domain as the original request are not showing in IE11, but do show in IE10. The network panel shows that the requests were actually made to retrieve the images, and the images were returned successfully, but don't display. Switching to IE10 mode causes the images to display. There is a real bug here, not just a "by design" CORS behavior.
Posted by Thomas Fischer TFX on 5/27/2014 at 4:28 AM
I can't confirm that Chrome (as you mentioned) behaves in the same way like IE11.
below the code to reproduce it.
Chrome (ver 35.0.1916.114) works without "img.crossOrigin = 'Anonymous';", but IE11 not:

canvas = document.createElement('CANVAS');
canvas.width = canvas.height = 80;
ctx2d = canvas.getContext('2d');
img = document.createElement('IMG');
//img.crossOrigin = 'Anonymous';
img.onload = function() {
    ctx2d.drawImage(img, 0, 0, 80, 80);
img.src = 'http://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg'
Posted by Microsoft on 1/30/2014 at 12:03 PM
Thank you for your feedback.

The issue you are reporting is by design.IE10 does not understand “crossorigin” attribute on the IMG tag and therefore allows the image. In IE11, we added support for CORS attribute for <IMG> tag, which blocks this image since crossorigin attribute is BLANK. The behavior is same in Chrome as well.
As a side note, putting the page in IE10 doc mode gets the page back to IE10 behavior on IE11.

Best regards,
The Internet Explorer Team
Posted by Microsoft on 1/22/2014 at 11:21 AM
Thank you for your feedback. We will be investigating this issue further.

Best regards,

The Internet Explorer Team
Posted by kaotisch on 12/17/2013 at 7:19 AM
I am having the same issue.

Here's a jfiddle that demonstrates the issue.
The example is using fabricjs but the issue is the same using a plain html5 canvas instead of a fabricjs wrapped one.


Works fine in all other browsers including IE10.