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

Слева размытое изображение на канвасе, справа исходное изображение, надо что бы было с пикселями, а оно размывает, не знаю как бороться.

c=skinImage.width/64; var canvas = document.createElement('canvas'); canvas.width = 256;// * scale; canvas.height = 256;// * scale; //we assign the same classname the image has, for CSS purposes canvas.setAttribute('class', skinImage.getAttribute('class')); var context = canvas.getContext("2d"); var s = scale; //draw the head context.drawImage(skinImage, 8*c, 8*c, 8*c, 8*c, 4*s, 0*s, 8*s, 8*s); //draw the mask context.drawImage(skinImage, 40*c, 8*c, 8*c, 8*c, 4*s, 0*s, 8*s, 8*s); //draw the body context.drawImage(skinImage, 20*c, 20*c, 8*c, 12*c, 4*s, 8*s, 8*s, 12*s); //draw the left leg context.drawImage(skinImage, 4*c, 20*c, 4*c, 12*c, 4*s, 20*s, 4*s, 12*s); //draw the right leg context.drawImage(skinImage, 4*c, 20*c, 4*c, 12*c, 8*s, 20*s, 4*s, 12*s); //draw the left arm context.drawImage(skinImage, 44*c, 20*c, 4*c, 12*c, 0*s, 8*s, 4*s, 12*s); //draw the right arm context.drawImage(skinImage, 44*c, 20*c, 4*c, 12*c, 12*s, 8*s, 4*s, 12*s); //draw down leftleg context.drawImage(skinImage, 20*c, 52*c, 4*c, 12*c, 4*s, 20*s, 4*s, 12*s); //draw down lefthand context.drawImage(skinImage, 36*c, 52*c, 4*c, 12*c, 0*s, 8*s, 4*s, 12*s);
//we replace the image with the canvas skinImage.parentNode.replaceChild(canvas, skinImage);
Использую такой код, s-это во сколько раз должно увеличиться, оно увеличивается, но в результате оно размывается вместо того что бы нормально отобразиться, я не знаю что делать подскажите.

Ответ

При помощи установки свойства context.imageSmoothingEnabled в false. Кроссбраузерная установка:
ctx.mozImageSmoothingEnabled = false; ctx.webkitImageSmoothingEnabled = false; ctx.msImageSmoothingEnabled = false; ctx.imageSmoothingEnabled = false;

Рабочий пример на Plunker
Страница на MDN