CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Maël Nison
Maël Nison

Reputation: 7353

HTML5 canvas disable antialias on primitive (curves, ...)

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( );

Upvotes: 10

Views: 6727

Answers (2)

user1693593
user1693593

Reputation:

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 common algorithms for various primitives:

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 compiled iteration.

Upvotes: 6

6502
6502

Reputation: 114481

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.

Upvotes: 1

Related Questions