Проблема с четкостью изображения в canvas

Впервые использую canvas. При загрузке туда изображения оно получается размытым. Как добиться чтоб оно выглядело также четко как оригинал?

<img src="http://afriendinparis.com/wp-content/uploads/2015/06/Vue_Paris.jpg" width=200><br>
<canvas id="canvas"></canvas>
let elem = document.getElementById("canvas")
let ctx = elem.getContext('2d')
let pic = new Image()
pic.src = "http://afriendinparis.com/wp-content/uploads/2015/06/Vue_Paris.jpg"
let k = (pic.width/pic.height)/17
let width = (pic.width*k).toFixed(0),
    height = (pic.height*k).toFixed(0)
pic.onload = function() {
  /* ctx.imageSmoothingEnabled = false; */
  ctx.drawImage(pic, 0, 0, width, height);
}

Код на https://jsfiddle.net/shegby/L9d61hxf/