Question

I want to turn off anti-aliasing and I believe I need to set shape-rendering to “crispEdges” for that.

How can I do that with JavaScript ?

This a a part of my code where I need turn off anti-aliasing:

context.strokeStyle = gradient;
context.lineWidth = 1;
context.moveTo(x + size, y + size);
context.lineTo(x + dx, y + dy);
context.stroke();

So lines should look like the one on right, and not other one on left.

Every help would be greatly appreciated!

Answer 1

In SVG you can set the ‘shape-rendering’ property e.g like this:

someElement.style.shapeRendering = "crispEdges";

Or as an attribute:

someElement.setAttribute("shape-rendering", "crispEdges");

HTML5 canvas has no way for toggling anti-aliasing on/off, some reasons why are given by Ian Hickson in this thread.