I Can't Save The Canvas As An Image When I Use Ctx.drawImage() To Put Another Image In It

Im trying to make drawing app where you can draw something on canvas and save your result as an image on the server by clicking 'save' button. You can also put another image as bac

Solution 1:

Your problem is be with canvas.toDataURL which is disabled if you draw cross-domain images to your canvas. If you open your browser console using F12 you will see the security error.

Since you're image host (imgur.com) has enabled cross-domain access to your image, you can comply with cross-domain security by adding img.crossOrigin='anonymous' to your img object.

var img = new Image;
img.crossOrigin='anonymous';
var url = "http://i.imgur.com/fmAoxZ0.jpg";
img.src = url;