CODEWITHSUNDEEP
javascripthtmlcanvasgraphics
A Person
A Person

Reputation: 75

Javascript Canvas imperfect pixels using drawImage and imageSmoothing disabled

I have disabled image smoothing using 

context.imageSmoothingEnabled = false;

If you look at the orange object in the image below (zoomed in with chrome) you can see how the pixels are weirdly aligned.

weird pixels

I can assure you that the original image is an 8x8 with perfectly placed pixels:

original image

I'm not sure if this is a result of disabling image smoothing or if it's got to do with the resolution of the canvas. How do I make the pixels consistent and regularly sized?

Live demo: https://jsfiddle.net/khjnqLjo/1/

Upvotes: 0

Views: 314

Answers (1)

BBB
BBB

Reputation: 615

You are drawing an image of 8x8 pixels to a 20x20 rectangle. This will lead to incorrect scaling because you can't draw half pixels. Solve this by setting your rectangle size to a multiple of eight or change your original image to be 10 pixels in width/height.

Upvotes: 1

Related Questions