Zoom example

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas -->

<canvas id="DefaultCanvas" width="300" height="227"></canvas>
<canvas id="NoSmoothingCanvas" width="300" height="227"></canvas>

JavaScript

var img = new Image();
img.src = 'http://imghst.co/31/Untitled8bit.bmp';
img.onload = function() {
  draw(this);
};

function draw(img) {
  var canvas = document.getElementById('DefaultCanvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, 10,10, 0, 0, 1000, 1000);
  img.style.display = 'none';


  var canvasNS = document.getElementById('NoSmoothingCanvas');
  var ctxNS= canvasNS.getContext('2d');
  ctxNS.imageSmoothingEnabled = false;
  ctxNS.mozImageSmoothingEnabled = false;
  ctxNS.webkitImageSmoothingEnabled = false;
  ctxNS.msImageSmoothingEnabled = false;
  ctxNS.drawImage(img, 0, 0, 10, 10, 0, 0, 1000, 1000);
  img.style.display = 'none';



}