[sly010]

Very cool, but by css-rotating (skewY(-6deg)) the canvas at the last moment, you introduced aliasing on the border between the canvas and the rest of the page which kills the vibe. The browser can't automatically blend the canvas with the rest of the page. It's noticeable even on a brand new retina display. Maybe you could keep your canvas square and introduce the skew in the shader.

[andrewmcwatters]

The funny thing is, as far as I know, skewY is a virtual draw command in the WebKit family of rendering engines.

It's "in the shader" already. For whatever reason, your browser's compositor is failing to anti-alias the rendering bounds of the canvas.

I don't know why, though. I don't see the issue in Safari on my system.

[vanyle]

As a workaround, you can add a transparent border (border: 2px solid transparent) around the skewed element to have antialiasing (at least on chrome)

[danwills]

Guess it depends on the browser as it looks sharp and free of aliasing for me, including when zooming in (Opera on Android)

[herpdyderp]

  - Safari: decent but still obviously present
  - Chrome: quite bad looking
  - Firefox: something in between

(tested on macOS)