HTML5 Canvas translate(0.5,0.5) not fixing line blurryness

by

Retina & HiDPI devices

Looking at the image you supplied. The canvas is half the resolution of the display. Zoom in and look at the pixels on the “X”, The DOM line is 1px yet still twice a wide as the pixels on that letter. That means the canvas is being stretched and the blur is due to the bilinear filtering. Either you are zoomed out on the tab or you have a retina or HiDPI display. Set the canvas.width & canvas.height to twice what it is, set the canvas.style.width & canvas.style.height to DOM pixels. Remove the ctx.translate and add ctx.scale(2,2) and all things will be clear.

A zoom in on the image

enter image description here

More Related Contents:

  1. How to clear the canvas for redrawing
  2. HTML5 Canvas Resize (Downscale) Image High Quality?
  3. Resize image with javascript canvas (smoothly)
  4. Disable Interpolation when Scaling a
  5. How to draw an inline svg (in DOM) to a canvas?
  6. How to draw an oval in html5 canvas?
  7. Best way to detect that HTML5 is not supported
  8. Getting mouse location in canvas [duplicate]
  9. JavaScript: Extract video frames reliably
  10. Capture frames from video with HTML5 and JavaScript
  11. How to draw polygons on an HTML5 canvas?
  12. JavaScript: getting ImageData without canvas
  13. Load image from url and draw to HTML5 Canvas
  14. HTML Canvas: How to draw a flipped/mirrored image?
  15. make canvas as wide and as high as parent
  16. How to fill the whole canvas with specific color?
  17. HTML5 responsive canvas: resizing the browser canvas draw disappear
  18. Is there a way to curve / arc text using CSS3 / Canvas
  19. How to scale an imageData in HTML canvas?
  20. Angle gradient in canvas
  21. Preventing Canvas Clear when Resizing Window
  22. How to draw a blurry circle on HTML5 canvas?
  23. Rasterizing an in-document SVG to Canvas
  24. Canvas text rendering (blurry)
  25. How to detect shape on a transparent canvas?
  26. HTML5 Canvas API – formatting individual words with italics
  27. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  28. Update HTML5 canvas rectangle on hover?
  29. how to animate drawing lines on canvas
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment