How can I disable the antialias effect in the following code ? I'm using Chrome 29.

JSFiddle here

var canvas = document.getElementById( 'test' );
var context = canvas.getContext( '2d' );

// These lines don't change anything
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

context.beginPath();
context.arc(100, 100, 100, 0, Math.PI * 2, true );
context.closePath();

context.fillStyle = 'red';
context.fill( );

How can I disable the antialias effect in the following code ? I'm using Chrome 29.

JSFiddle here

var canvas = document.getElementById( 'test' );
var context = canvas.getContext( '2d' );

// These lines don't change anything
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;

context.beginPath();
context.arc(100, 100, 100, 0, Math.PI * 2, true );
context.closePath();

context.fillStyle = 'red';
context.fill( );

• javascript
• html
• canvas
• html5-canvas

Share Improve this question Follow asked Aug 31, 2013 at 18:41 Maël NisonMaël Nison 7,35377 gold badges4848 silver badges7979 bronze badges 4

• this question makes me think of this one, which i answered : stackoverflow./questions/14424648/nice-ellipse-on-a-canvas/… In a few words : with a quite big performance hit, you can post-process the draw or re-implement the primitives without antialiasing (quite some work maybe), but there's no way to get it done as fast without antialiasing. – GameAlchemist Commented Aug 31, 2013 at 23:08
• When I was making a graphing script, I found if you draw same thing 20 times, the anti-aliased pixels stack up to bee aliased. The faster way is to draw the desired shapes on an image buffer, clamp the alpha (0% or 100%) by reading the data, and draw the image buffer into the canvas. (I don't have time to write the code) – Ming-Tang Commented Sep 1, 2013 at 7:08
• Please also see my "retro canvas" project here: github./epistemex/retro-context-canvas (it's free) – user1693593 Commented Nov 19, 2014 at 6:01
• That link is now github./epistemex/8-bit (and there's also this one: github./mohayonao/gretro) – 1j01 Commented Nov 2, 2016 at 21:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

The imageSmoothingEnabledonly affects images drawn to canvas using drawImage() (hence the name imageSmoothingEnabled). There is sadly no way to disable this for lines and shapes.

As with 6502's answer and previous answers on SO you will need to implement "low-level" methods to achieve this.

Here are some links to some mon algorithms for various primitives:

• Bresenham line algorithm (see this answer for implementation)
• Midpoint circle algorithm (and ellipse with the same) Here's an implementation.
• Bezier curve (implementation at CodeProject)

The way you need to implement this is to get the x and y coordinates from these formulas. Then you need to either to use rect(x, y, 1, 1) or set a pixel directly by altering the image data buffer directly. The latter tend to be faster for these sort of things.

In both cases you will have a relatively huge performance reduction as you need to iterate using JavaScript versus browser's internal piled iteration.

Unfortunately there is no portable way to disable antialiasing when drawing on a canvas.

The only solution I found is reimplementing graphic primitives writing directly on the image data.