Я пытаюсь нарисовать следующее изображение на холсте, но оно выглядит размытым, несмотря на определение размера холста. Как вы можете видеть ниже, изображение четкое и четкое, тогда как на холсте оно размытое и пиксельное.
и вот как это выглядит (левый является оригиналом, а правый - нарисованным холстом и размытым).
Что я делаю не так?
console.log('Hello world')
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var playerImg = new Image()
// http://i.imgur.com/ruZv0dl.png sees a CLEAR, CRISP image
playerImg.src = 'http://i.imgur.com/ruZv0dl.png'
playerImg.width = 32
playerImg.height = 32
playerImg.onload = function() {
ctx.drawImage(playerImg, 0, 0, 32, 32);
};
#canvas {
background: #ABABAB;
position: relative;
height: 352px;
width: 512px;
z-index: 1;
}
<canvas id="canvas" height="352" width="521"></canvas>