Tengo un canvas de 800x400, estoy pintando sobre ella una imágenes de dimensiones muy pequeña y pixeladas (5x5, 10x5, 7x5, 5x7, etc). Al mandarlas al canvas haciendo escalados de [2, 2], [4, 4] etc. No se hace de forma lineal y no conserva la claridad de los pixeles. ¿Cómo se puede lograr esto?
var imagen = document.getElementById("img");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(imagen, 10, 10);
ctx.scale(8,8);
ctx.drawImage(imagen, 10, 10);
canvas{
border: 5px solid black;
background: #FFF;
width: 800px;
height: 400px;
}
<img id="img" src="https://minecraft-statistic.net/face/JRMUS.png" hidden >
<canvas id="canvas" width="800" height="400" ></canvas>