Ask coding questions

← Back to all posts
pixel art getting blured for no real reason
Mathman05 (1)

I have pixel art, and i want to use it in one of my projects, due to wanting to reduce file size and how I make it the pixel art is a 5x5 image and drawing the image isn't working at all. is the image the issue or is something in the way I'm drawing it the issue
also here's the orginal image.
I found a solution after a bit more searching

ctx.imageSmoothingEnabled = false;

that makes all the issues disappear!

Answered by Coder100 (16969) [earned 5 cycles]
View Answer
Coder100 (16969)

Your image has to be larger.

When an image is upscaled, it loses its quality. I won't bore you with exactly why, but it's something about pixels.

Anyways, what you should have done instead was create the image at a large size so when you downscale it, the quality is good.

Mathman05 (1)

@Coder100 I never downsized it, this is its original size. I'm using the images from the project and there all the images work just fine, this is also where I created the art. I want to try and keep file sizes down too, any idea how to get the images to work better without a larger file size?(for loading times)

Mathman05 (1)

@Coder100 yeah just has to double the image size, it's gone now idk why it had issues.

Mathman05 (1)

@Coder100 I found a better way! :D after searching for a while I found ctx.imageSmoothingEnabled = false; and that makes all the issues just go away! :D I hope this helps you as much as it helps me :D

Coder100 (16969)

ah yes, and don't forget to also do that for the canvas itself too
something about pixelRatio @Mathman05