HTML5 Canvas and Anti-aliasing

Question

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

User · Answer

It s now 2018  and we finally have cheap ways to do something around it     Indeed  since the 2d context API now has a filter property  and that this filter property can accept SVGFilters  we can build an SVGFilter that will keep only fully opaque pixels from our drawings  and thus eliminate the default anti-aliasing   So it won t deactivate antialiasing per se  but provides a cheap way both in term of implementation and of performances to remove all semi-transparent pixels while drawing   I am not really a specialist of SVGFilters  so there might be a better way of doing it  but for the example  I ll use a  lt feComponentTransfer gt  node to grab only fully opaque pixels    x000D   x000D  var ctx   canvas getContext  2d    x000D  ctx fillStyle     ABEDBE   x000D  ctx fillRect 0 0 canvas width canvas height   x000D  ctx fillStyle    black   x000D  ctx font    14px sans-serif   x000D  ctx textAlign    center   x000D   x000D     first without filter x000D  ctx fillText  no filter   60  20   x000D  drawArc    x000D  drawTriangle    x000D     then with filter x000D  ctx setTransform 1  0  0  1  120  0   x000D  ctx filter    url  remove-alpha    x000D     and do the same ops x000D  ctx fillText  no alpha   60  20   x000D  drawArc    x000D  drawTriangle    x000D   x000D     to remove the filter x000D  ctx filter    none   x000D   x000D   x000D  function drawArc     x000D    ctx beginPath    x000D    ctx arc 60  80  50  0  Math PI   2   x000D    ctx stroke    x000D    x000D   x000D  function drawTriangle     x000D    ctx beginPath    x000D    ctx moveTo 60  150   x000D    ctx lineTo 110  230   x000D    ctx lineTo 10  230   x000D    ctx closePath    x000D    ctx stroke    x000D    x000D     unrelated x000D     simply to show a zoomed-in version x000D  var zCtx   zoomed getContext  2d    x000D  zCtx imageSmoothingEnabled   false  x000D  canvas onmousemove   function drawToZoommed e    x000D    var x   e pageX - this offsetLeft  x000D      y   e pageY - this offsetTop  x000D      w   this width  x000D      h   this height  x000D       x000D    zCtx clearRect 0 0 w h   x000D    zCtx drawImage this  x-w 6 y-h 6 w  h  0 0 w 3  h 3   x000D    x000D   lt svg width  0  height  0  style  position absolute z-index -1   gt  x000D     lt defs gt  x000D       lt filter id  remove-alpha  x  0  y  0  width  100   height  100   gt  x000D         lt feComponentTransfer gt  x000D           lt feFuncA type  discrete  tableValues  0 1  gt  lt  feFuncA gt  x000D         lt  feComponentTransfer gt  x000D         lt  filter gt  x000D     lt  defs gt  x000D   lt  svg gt  x000D   x000D   lt canvas id  canvas  width  250  height  250   gt  lt  canvas gt  x000D   lt canvas id  zoomed  width  250  height  250   gt  lt  canvas gt  x000D   x000D   x000D    And for the ones that don t like to append an  lt svg gt  element in their DOM  you can also save it as an external svg file and set the filter property to path to svg file svg remove-alpha

User · Answer

You may translate canvas by half-pixel distance   ctx translate 0 5  0 5     Initially the canvas positioning point between the physical pixels

User · Answer

so I am assuming this is kinda out of use now but one way to do it is actually using document body style zoom 2 0  but if you do this then all of your canvas measurements will have to be divided by the zoom  Also  set the zoom higher for more aliasing  This is helpful because it is adjustable  Also if using this method  I suggest that you make functions to do the same as ctx fillRect   etc  but with the zoom taken into account  E g   function fillRect x  y  width  height        var zoom   document body style zoom      ctx fillRect x zoom  y zoom  width zoom  height zoom       Hope this helps   Also  a sidenote  this can be used to sharpen circle edges as well so that they don t look as blurred  Just use a zoom such as 0 5

User · Answer

Anti-aliasing cannot be turned on or off  and is controlled by the browser   Can I turn off antialiasing on an HTML  lt canvas gt  element

User · Answer

Here s a workaround that requires you to draw lines pixel by pixel  but will prevent anti aliasing      some helper functions    finds the distance between points function DBP x1 y1 x2 y2        return Math sqrt  x2-x1   x2-x1   y2-y1   y2-y1         finds the angle of  x y  on a plane from the origin function getAngle x y    return Math atan y  x  0 0 01 x    x lt 0 Math PI 0        the function function drawLineNoAliasing ctx  sx  sy  tx  ty        var dist   DBP sx sy tx ty      length of line     var ang   getAngle tx-sx ty-sy      angle of line     for var i 0 i lt dist i                 for each point along the line         ctx fillRect Math round sx   Math cos ang  i      round for perfect pixels                      Math round sy   Math sin ang  i      thus no aliasing                      1 1      fill in one pixel  1x1           Basically  you find the length of the line  and step by step traverse that line  rounding each position  and filling in a pixel   Call it with  var context   cv getContext  2d    drawLineNoAliasing context  20 30 20 50      line from  20 30  to  20 50

User · Answer

If you need pixel level control over canvas you can do using createImageData and putImageData   HTML    lt canvas id  qrCode  width  200   height  200  gt    QR Code  lt  canvas gt    And JavaScript   function setPixel imageData  pixelData      var index    pixelData x   pixelData y   imageData width    4      imageData data index 0    pixelData r      imageData data index 1    pixelData g      imageData data index 2    pixelData b      imageData data index 3    pixelData a     element   document getElementById  qrCode    c   element getContext  2d     pixcelSize   4  width   element width  height   element height    imageData   c createImageData width  height    for  i   0  i  lt  1000  i        x   Math random     width   pixcelSize   0      0 to Int32   y   Math random     height   pixcelSize  0     for j 0 j  lt  pixcelSize  j         for k 0 k  lt  pixcelSize  k          setPixel  imageData             x  x   pixcelSize   j             y  y   pixcelSize   k           r  0   0           g  0   0           b  0   256   0           a  255    255 opaque                           c putImageData imageData  0  0     Working sample here

User · Answer

I haven t needed to turn on anti-alias because it s on by default but I have needed to turn it off  And if it can be turned off it can also be turned on    ctx imageSmoothingEnabled   true    I usually shut it off when I m working on my canvas rpg so when I zoom in the images don t look blurry

[html] HTML5 Canvas and Anti-aliasing

Examples related to html

Examples related to canvas

Examples related to antialiasing