HTML5 Canvas and Anti-aliasing

html canvas antialiasing
KRouane picture KRouane · Nov 23, 2010 · Viewed 111.2k times · Source

How to turn on the anti-aliasing on an canvas.

The following code doesn't draw a smooth line:

var context = mainCanv.getContext("2d");
if (context) {
   context.moveTo(0,0);
   context.lineTo(100,75);

   context.strokeStyle = "#df4b26";
   context.lineWidth = 3;
   context.stroke();
}

Answer

Bacher picture Bacher · Aug 23, 2013

You may translate canvas by half-pixel distance.

ctx.translate(0.5, 0.5);

Initially the canvas positioning point between the physical pixels.

Related questions

Can I turn off antialiasing on an HTML <canvas> element?

I'm playing around with the <canvas> element, drawing lines and such. I've noticed that my diagonal lines are antialiased. I'd prefer the jaggy look for what I'm doing - is there any way of turning this feature off?

Read More
Html5 canvas drawImage: how to apply antialiasing

Please have a look at the following example: http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150); } img.…

Read More
Subpixel anti-aliased text on HTML5's canvas element

I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help. In the following screenshot the top "Quick Brown Fox" is an H1 element and the bottom one is a canvas element …

Read More