Question

122

HTML5 - Canvas, drawImage() draws image blurry

rated 0 times [ 129] [ 7] / answers: 1 / hits: 36881 / 9 Years ago, mon, august 10, 2015, 12:00:00

I am trying to draw the following image to a canvas but it appears blurry despite defining the size of the canvas. As you can see below, the image is crisp and clear whereas on the canvas, it is blurry and pixelated.

and here is how it looks (the left one being the original and the right one being the drawn-on canvas and blurry.)

What am I doing wrong?

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

wilson

Add To Favorites

Follow

Total Points: 27

Total Questions: 93

Total Answers: 93

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

wilson questions

1 Discord.js v14 how to handle button interactions

Tue, Aug 9, 22, 00:00, 2 Years ago

1 Post Request net::ERR_CONNECTION_REFUSED

Wed, May 11, 22, 00:00, 2 Years ago

1 I can't use the apploading on my react native. It wont work properly

Sat, Dec 12, 20, 00:00, 3 Years ago

1 Should I use useRef for storing one-time initialised data?

Wed, May 20, 20, 00:00, 4 Years ago

1 Overwriting an existing command with Cypress

Wed, May 13, 20, 00:00, 4 Years ago

View All

answered 9 Years ago sonja · Accepted Answer

The reason this is happening is because of Anti Aliasing.
Simply set the imageSmoothingEnabled to false like so

context.imageSmoothingEnabled = false;

Here is a jsFiddle verson

jsFiddle : https://jsfiddle.net/mt8sk9cb/

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.onload = function() {

  ctx.imageSmoothingEnabled = false;

  ctx.drawImage(playerImg, 0, 0, 256, 256);

};