Не удается нарисовать изображение удаленного файла на локальном холсте

Question

Я читал, как мне нужно настроить CORS на моем сервере и файл crossdomain.xml для работы метода .drawImage ().Я пытался реализовать все это, и я думаю, что сделал это хорошо.

Вот HTTP-заголовок, который идет с изображением, которое я пытаюсь нарисовать:

Access-Control-Allow-Origin: *

Ивот файл crossdomain.xml: http://bew.ink/public/images/costum/crossdomain.xml

Одна из картинок находится здесь: http://bew.ink/public/images/costum/non_printable_background.png

Мне все кажется правильным, но когда я пытаюсь нарисовать эту картинку нахолст, это просто не работает:

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

var img = new Image();

img.onload = function() {
    ctx.drawImage(img, 0, 0);
}

img.src = "http://bew.ink/public/images/costum/non_printable_background.png";
    

<canvas id="canvas1" width="500" height="500"></canvas>

Answer 1

Хорошо, это была такая глупая проблема, спасибо @Kalido за предоставленное решение.

Изображения, которые я пытаюсь нарисовать, имеют широкую прозрачную поверхность и больше моего холста, поэтому все, что я нарисовал, этопрозрачная поверхность.Вот почему я не вижу ничего нарисованного.