Question

I do this:

$('#displayBtn').click(function(){
    var canvas = document.getElementById("myCanvas");
    var dataUrl = canvas.toDataURL();
    document.getElementById("textArea").value = dataUrl;
});

It works great on Firefox and IE, but no luck with Chrome. I googled and came back with the issue relating to .SVG files, but I’m not using any SVG files, only PNG and JPG. Here is a fiddle of my code: http://jsfiddle.net/ykpCn/2/
Is it because I’m using transparent PNGs? Not sure what I’m doing wrong. Very new to HTML5, I hope it’s not something stupid that I’ve overlooked.

Answer 1

The issue is related to Cross origin resource access. The image you have rendered on the canvas is from a different origin (http://moosepi.com). You can’t call toDataURL() on images which are from different origins.

If you fire up your Chrome developer tools, you will find this in your console. “Uncaught Error: SECURITY_ERR: DOM Exception 18”. This is the expected behavior as per the spec.

Solution:
1. Host the images from your server (may be using a Proxy setup).
2. Set CORS attribute on the resource. Remember the source must set the appropriate headers.