Estoy tratando de entender cómo usar el atributo crossorigin para la etiqueta img. No pude encontrar un buen ejemplo (los que encontré sobre las imágenes habilitadas para CORS se explican con códigos JavaScript, por lo tanto, no pude ver el atributo crossorigin con la etiqueta img.

Tengo una conjetura, corrija mis errores si entendí algo mal.

En primer lugar, se puede escribir el código siguiente para dibujar una imagen en el lienzo:

<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>

¿El siguiente código es equivalente al superior? No incluye "img.crossOrigin" pero tiene el atributo crossorigin en la etiqueta img.

<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>

A decir verdad, no puedo hacer experimentos porque no sé qué sitio permite usar sus imágenes como CORS.

Lo que supongo es que, si un sitio permite usar sus imágenes en el lienzo si la solicitud CORS se realiza de forma anónima, puede dibujarla en el lienzo, si no, no puede dibujarla en el lienzo, incluso si la solicitud se realiza de forma anónima (estoy No estoy seguro si estoy aquí). Por lo tanto, los dos ejemplos anteriores deben solicitar CORS de forma anónima.

¿Podría decir si ambos funcionan igual? Si no, ¿podría explicar por qué y darme un ejemplo usando el atributo crossorigin con la etiqueta img?