How to Draw Sharp Lines on a HTML5 Canvas for Retina Displays

Posted on by Chris

Two ways to get 1px wide sharp and crisp lines for retina displays:

  • Scale the canvas to twice the size (context.scale(2,2);) and then draw a 1px wide line like so: context.lineWidth=0.5
  • Use all device pixels and draw the image twice the size. This is the approach I focus on in this blog post.

Here is how to draw super sharp lines on an HTML5 canvas for retina displays: Continue reading How to Draw Sharp Lines on a HTML5 Canvas for Retina Displays