9 ms·
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 w
by sly010 1y ago
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.
- danwills 1y agoGuess it depends on the browser as it looks sharp and free of aliasing for me, including when zooming in (Opera on Android)
- herpdyderp 1y ago- Safari: decent but still obviously present - Chrome: quite bad looking - Firefox: something in between (tested on macOS)
- andrewmcwatters 1y agoThe 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 1y agoAs a workaround, you can add a transparent border (border: 2px solid transparent) around the skewed element to have antialiasing (at least on chrome)