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