Poor anti-aliasing of text drawn on Canvas

by

My answer came from this link, maybe it will help someone else.
http://www.html5rocks.com/en/tutorials/canvas/hidpi/

The important code is as follows.

// finally query the various pixel ratios
    devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1,

    ratio = devicePixelRatio / backingStoreRatio;

// upscale the canvas if the two ratios don't match
if (devicePixelRatio !== backingStoreRatio) {

    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = oldWidth * ratio;
    canvas.height = oldHeight * ratio;

    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';

    // now scale the context to counter
    // the fact that we've manually scaled
    // our canvas element
    context.scale(ratio, ratio);

}

More Related Contents:

  1. Subpixel anti-aliased text on HTML5’s canvas element
  2. Html5 canvas drawImage: how to apply antialiasing
  3. HTML5 Canvas and Anti-aliasing [duplicate]
  4. HTML5 Canvas Rotate Image
  5. html5 – canvas element – Multiple layers
  6. How to Copy Contents of One Canvas to Another Canvas Locally
  7. Drawing text to with @font-face does not work at the first time
  8. What’s the best way to set a single pixel in an HTML5 canvas?
  9. How to change the opacity (alpha, transparency) of an element in a canvas element?
  10. using HTML5 Canvas – rotate image about arbitrary point
  11. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  12. get click event of each rectangle inside canvas?
  13. HTML5 Canvas getImageData and Same Origin Policy
  14. How can I write text on a HTML5 canvas element?
  15. Animated GIF in HTML5 canvas
  16. Chart.js canvas resize
  17. Drawing a dot on HTML5 canvas [duplicate]
  18. HTML5 Canvas background image
  19. Placing a within a
  20. Combining two or more Canvas elements with some sort of blending
  21. All html canvas shapes are given the color of the last object added
  22. How to apply font anti-alias effects in CSS? [duplicate]
  23. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  24. Content Security Policy: “img-src ‘self’ data:”
  25. “Erasing” in html5 canvas
  26. How put percentage width into html canvas (no css)
  27. HTML5 Canvas and Line Width
  28. Clear Canvas Rect (but keep background)
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment