"HTML5 画布禁用原始（曲线，...）上的抗锯齿"

Question

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

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

Answer 1

The imageSmoothingEnabled only affects images drawn to canvas using drawImage() (hence the name image SmoothingEnabled). 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:

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

Answer 2

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.

Answer 3

Is this what you're looking for? <canvas style="image-rendering: pixelated"><\/code>

"