Canvas demo: imageSmoothingEnabled = false

by denvdmj

HTML

<input type="range" id="idInputFragSize" min="32" max="256" step="16" />
<output id="idOutputFragSize"></output>
<img id="image" src="https://i.imgur.com/pzHBCIG.jpg" />
<canvas id="canvas"></canvas>

CSS

:root {
  font: 17px/1.36 "Roboto", "Roboto Condensed", "Arial", sans-serif;
  font-stretch: ultra-condensed;
  text-align: left;
  cursor: default;
}
body {
  margin: 1em;
  padding: 0;
}
#idInputFragSize {
  width: calc(100% - 6em);
}
#idOutputFragSize {
  display: inline-block;
  color: #888;
  width: 4em;
  height: 2em;
}

JavaScript

var tsize = 800;
var ssize = 32;
var ctx = canvas.getContext('2d');

canvas.width =
  canvas.height = tsize;

ctx.mozImageSmoothingEnabled =
  ctx.webkitImageSmoothingEnabled =
  ctx.msImageSmoothingEnabled =
  ctx.imageSmoothingEnabled = false;

drawFragment(163, 96);

idInputFragSize.oninput = 
idInputFragSize.onchange = onInputFragSize;
idInputFragSize.value = ssize;
onInputFragSize.call(idInputFragSize)

image.onmousemove = function(event) {
  drawFragment(
    event.offsetX - ssize / 2,
    event.offsetY - ssize / 2
  );
};

function drawFragment(sx, sy) {
  ctx.clearRect(0, 0, tsize, tsize);
  ctx.drawImage(image,
    sx, sy, ssize, ssize,
    0, 0, tsize, tsize
  );
}
function onInputFragSize () {
	ssize = parseInt(this.value);
  idOutputFragSize.textContent = ssize + 'px';
}