canvas - HTML crossorigin attribute for img tag

Question

I am trying to understand how to use the crossorigin attribute for the img tag. I couldn't find a good example (The ones I found about CORS enabled images are explained with JavaScript codes, therefore I couldn't see the crossorigin attribute with the img tag.

I have got a guess, please correct my mistakes if I understood something wrong.

First of all one can write the code piece below to draw an image to canvas:

<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" src="http://...." alt="" width="400" height="400">
<script>
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.crossOrigin = "Anonymous";
    img.src = document.getElementById("image").value;
    context.drawImage(img, 40, 40);
}
</script>

Is the code below equivalent to the upper one? It doesn't include "img.crossOrigin" but have crossorigin attribute in the img tag.

<canvas id="canvas" width=400 height=400></canvas>
<br><br>
<img id="image" crossorigin="anonymous"src="http://...." alt="" width="400" height="400">
<script>
function draw() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var img = new Image();
    img.src = document.getElementById("image").value;
    context.drawImage(img, 40, 40);
}
</script>

To tell the truth I cannot make experiments because I don't know what site allows to use its images as CORS.

What I guess is that, if a site allow to use its images in canvas if the CORS request is done by anonymously you can draw it in canvas, if not you cannot draw it in canvas even if the request is done by anonymously (I am not sure if I am right here). Therefore both of the examples above must be requesting CORS anonymously.

Could you please say if both of them works the same? If not, could you please explain why and give me an example using the crossorigin attribute with the img tag?

Answer 1

Since you are using the #image element as the source for your image, the 2 versions of your code are roughly equivalent.

But...

The version without crossorigin="anonymous" in the img element will probably still generate a cross-domain violation.

That's because the image is originally loaded into the img element without the cross-origin flag set to anonymous.

The javascript code will likely use the cached version of the image from the img element rather than trying to reload it from http://...

This means the cached image data will still taint the canvas as containing cross-origin content.

BTW, a syntax error in your code:

// Not:  img.src = document.getElementById("image").value;

img.src = document.getElementById("image").src;