Bagaimana dan mengapa lebar/tinggi kanvas mengacaukan gambar gambar saya?

onload = e => {
  const img = document.querySelector('img');
  console.log(
    'computed',
    img.width, // 300
    img.height // 150
  );
  console.log(
    'intrinsic',
    img.naturalWidth, // 0 in FF, 300 in Chrome
    img.naturalHeight // 0 in FF, 150 in Chrome
  );
}

img { border: 1px solid blue}

<img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg">

const img = new Image(),
  canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  draw = async () => {
    const w = img.naturalWidth,
          h = img.naturalHeight;
    console.log('reported img size', w, h);
    ctx.fillRect(0, 0, w, h);
    await wait(2000);
    console.log('drawImage with reported size');
    ctx.drawImage(img, 0, 0, w, h);    
    await wait(2000);
    console.log('default drawImage');   
    ctx.drawImage(img, 0, 0);
  };


img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

img.onload = draw;

function wait(ms) {
  return new Promise(res => setTimeout(res, ms));
}

<canvas id="canvas" width="300" height="300">

let img = new Image(),
  canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  step = 0,
  drawImage = (ctx, img, x, y, degrees, w = 300, h = 300) => {
    ctx.save();
    ctx.translate(x + w / 4, y + h / 4);
    ctx.rotate(degrees * Math.PI / 180.0);
    ctx.translate(-x - w / 4, -y - h / 4);
    ctx.drawImage(img, x, y, w, h);
    ctx.restore();
  },
  animate = () => {
    ctx.globalCompositeOperation = 'destination-over';
    // clear canvas
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    drawImage(ctx, img, 0, 0, step)

    step++;
    window.requestAnimationFrame(animate);
  }


canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

img.onload = animate;

fetch("https://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg")
  .then(resp => resp.text())
  .then(markup => {
    const mime = 'image/svg+xml';
    const doc = new DOMParser().parseFromString(markup, mime);
    doc.documentElement.setAttribute('width', 150);
    doc.documentElement.setAttribute('height', 150);
    img.src = URL.createObjectURL(
      new Blob( [new XMLSerializer().serializeToString(doc)], { type: mime } )
    );
  })
  .catch(console.error);

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* just to be sure these are full screen*/
canvas { display:block;} /* To remove the scrollbars */

<canvas id="canvas" width="300" height="300">