Может кто-нибудь объяснить мой код, почему он работает?

Question

Функция drawImage() не соответствует параметрам функции для рисования изображения.Исходный размер смайлика составляет 213 пикселей (ширина) и 212 пикселей (высота).Изображение было нарисовано слишком большим.Высота рисованного изображения составляет 500 пикселей, а ширина рисованного изображения составляет около 400 пикселей (сжатый).

Я изменил свой код, показанный ниже.Оно работает.Изображение будет отлично нарисовано с размером 213x212.Однако я не могу использовать переменные width и height в качестве фактических параметров.т.е.

ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, width, height);

Изображение не будет нарисовано !!Теперь я могу указать любые размеры, например

ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, 500, 500);

Изображение будет отлично отрисовано с размером 500x500.
Мне было интересно, что именно делает выражение

var width = c.setAttribute("width", "500"); 

?Я использую отладчик для проверки ширины переменной, она не содержит никакого значения.хммм ...
Если я удалю утверждение var width = c.setAttribute("width", "500");, изображение вообще не будет нарисовано!
Надеюсь, что кто-нибудь сможет это объяснить.

var smiley = new Image();
smiley.src = "images/smiley.jpg";
window.onload = function () {
    var c = document.getElementById("mypic");
    var ctx = c.getContext("2d");
    var sx = 0;
    var sy = 0;
    var swidth = smiley.width;
    var sheight = smiley.height;
    var x = 0;
    var y = 0;

    //the following three lines are the original code
    //and is not working properly.
    //var width = smiley.width;
    //var height = smiley.height;
    //ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, width, height);      

    //Now, it is working fine        
    var width = c.setAttribute("width", "500");
    var height = c.setAttribute("height", "500");
    ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, 213, 212);
};

canvas {
  background-color:green;
  width: 500px;
  height: 500px;
}

<canvas id="mypic" ></canvas>

Answer 1

Несколько вещей, которые следует учитывать здесь: во-первых, это не window.onload, это должен быть объект загрузки onload.Затем вы можете установить высоту и ширину холста на основе фактического размера изображения, которое будет нарисовано.Вот быстрый предварительный просмотр этого.

var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png'

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

<canvas id="canvas" ></canvas>