JS Canvas Lines

Drawing Pixel Perfect Lines on the JS Canvas

While working on a generative art idea using the JavaScript canvas API I noticed that the lines I was drawing were blurry. While researching a solution I found a few different fixes for this issue, some of which worked better than others so I documented them in the slides below.

Slides

  1. Drawing Lines Should be Easy, Right?
  2. Drawing Pixel Perfect Lines on the JS Canvas
  3. Where Exactly is a Line Drawn?
  4. What About Close, Evenly Spaced Lines?
  5. Offsetting the Whole Canvas
  6. Device Pixel Ratio
  7. Always Be Scaling
  8. Maybe just use rectangles?

View Source

  • Canvases are scaled 4x.