How do I remove the image blur in my pixel art?

I know I’ve seen many topics like this, and only one of them had the solution. This one, however, I cannot find anymore. I remember it had this pixel art Sonic that was pretty neat and also had the JavaScript to make the image not blurry. If someone can tell me the JavaScript to make the image pixelated OR send me the link to the topic, that would be greatly appreciated. Also, if there is a “Topic History” thing that I just don’t know of, it would also be nice to be told if that exists.

this might help you. it doesn’t have a pixel art Sonic but it does have a JavaScript solution.

an alternative is to export your pixel art in an upscaled resolution (for example, in Piskel you can export with up to 10x size), which should keep the edges sharper. (if that’s not enough, maybe there’s an online tool that can upscale it even more)

1 Like

Thank you so much

I can help you with pixelating images in JavaScript. Here’s the code:

`JavaScriptfunction pixelateImage(image, scale) {
const canvas = document.createElement(‘canvas’);
const context = canvas.getContext(‘2d’);
canvas.width = image.width / scale;
canvas.height = image.height / scale;
context.drawImage(image, 0, 0, canvas.width, canvas.height);
return canvas.toDataURL();

// Example usage:
const image = document.getElementById(‘myImage’);
const pixelatedImage = pixelateImage(image, 2); // Adjust scale for desired level of pixelation

// Replace the existing image source with the pixelated version
image.src = pixelatedImage;`

Use code with caution.


This code creates a canvas, draws a scaled version of the image onto it, and returns the pixelated image data as a URL. You can then use this URL to update the source of your image element. You can try searching for “pixelate image javascript” or “how to make image pixelated javascript” to find more resources. For further learning on web development techniques, including 3D animation, I recommend searching online using keywords like “3D animation course