Skip to main content
DigitalDesignDude
Inspiring
Oct 2, 2024 9:12 PM UTC
Answered

Turn off Anti-aliasing for HTML5 Canvas Projects?

 

I would like to use pixel art in my HTML5 Canvas projects, but I'm unsure how I can disable the antialiasing or blurring that occurs when the bitmaps or the canvas itself is scaled up.

 

I know for ActionScript projects, I can turn off "Allow smoothing" from the Bitmap properties to prevent this. But that doesn't seem to work in HTML5 canvas projects, from what I've tested.

I've also tried adding the following CSS and JavaScript code to Animate's generated HTML file, but that did not seem to make any noticeable difference either. 

 

<style>
    /*Set canvas to use nearest neighbor scaling algorithm*/
    canvas {
        image-rendering: pixelated;
    }
</style>


<script>
    //Get a reference to the canvas
    canvas = document.getElementById("canvas");

    // Get the canvas context
    var ctx = canvas.getContext("2d");

    // Attempt to disable smoothing 
    ctx.imageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
</script>

 

 
Thank you for any help you can provide in fixing this issue.

This topic is closed to new replies. Start a new post to keep the conversation going.
JoãoCésar17023019
JoãoCésar17023019Correct answer
Community Expert
Oct 2, 2024 9:52 PM UTC

Hi.

 

You should only need to turn off image smoothing on the canvas' 2D context by running the code below in the main timeline:

canvas.getContext("2d").imageSmoothingEnabled = false;

 

Regards,

JC

3 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
Oct 2, 2024 9:52 PM UTC

Hi.

 

You should only need to turn off image smoothing on the canvas' 2D context by running the code below in the main timeline:

canvas.getContext("2d").imageSmoothingEnabled = false;

 

Regards,

JC

Translate
DigitalDesignDude
Inspiring
Oct 2, 2024 10:06 PM UTC

Fantastic! That worked very well. Thank you, JC. 

Translate
JoãoCésar17023019
Community Expert
Community Expert
Oct 2, 2024 10:08 PM UTC

Awesome! You're welcome!

Translate