Estou tentando entender como usar o atributo crossorigin para a marca img. Não consegui encontrar um bom exemplo (os que encontrei sobre as imagens habilitadas para CORS são explicados com códigos JavaScript, portanto não pude ver o atributo crossorigin com a tag img.

Eu tenho um palpite, por favor, corrija meus erros se entendi algo errado.

Antes de tudo, pode-se escrever o código abaixo para desenhar uma imagem na tela:

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

O código abaixo é equivalente ao superior? Ele não inclui "img.crossOrigin", mas possui o atributo crossorigin na tag 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>

Para dizer a verdade, não posso fazer experimentos porque não sei qual site permite usar suas imagens como CORS.

O que eu acho é que, se um site permitir usar suas imagens na tela, se a solicitação do CORS for feita anonimamente, você poderá desenhá-la na tela, caso contrário, você não poderá desenhá-la na tela, mesmo que a solicitação seja feita anonimamente (eu sou não tenho certeza se estou bem aqui). Portanto, os dois exemplos acima devem estar solicitando o CORS anonimamente.

Você poderia dizer se os dois funcionam da mesma forma? Caso contrário, você poderia explicar o porquê e me dar um exemplo usando o atributo crossorigin com a tag img?