Skip to main content
DigitalDesignDude
Inspiring
October 2, 2024
Answered

Turn off Anti-aliasing for HTML5 Canvas Projects?

  • October 2, 2024
  • 1 reply
  • 2279 views

 

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 has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
October 2, 2024

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

DigitalDesignDude
Inspiring
October 2, 2024

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

JoãoCésar17023019
Community Expert
Community Expert
October 2, 2024

Awesome! You're welcome!