Drawing images to canvas with img.crossOrigin = “Anonymous” doesn't work

Question

In a client-side standalone JS application, I\'m trying to make it so I can call toDataURL() on a canvas on which I\'ve drawn some images specified by a URL. Ie I can input

Answer 1

When the server requires authorization to access the images the value should be:

img.crossOrigin = "Use-Credentials";

Otherwise the browser will give up after receiving HTTP 401.

Answer 2

You must set the CORS request before the src - just swap the lines into:

img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;

You will also need to add an onload handler to the image as loading is asynchronous:

img.onload = function() {
    context.drawImage(this, 40, 40);
    // call next step in your code here, f.ex: nextStep();
};
img.crossOrigin = "Anonymous";
img.src = document.getElementById("imgbox").value;