Hacker News Reader

Comment by yincrash | Hacker News Reader

https://github.com/vikrum/kidpix/issues/16

It appears because the underlying HTML5 Canvas tools are being used, things like antialiasing are unavoidable without remaking certain API calls. I'm sure it could be done though!

View on HN

I think that can be turned off. I tried that recently. There is a global flag we can set to turn of antialiasing.

UPDATE: it's

    image-rendering: pixelated;

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rende...

This rabbit hole is a waste of time, as someone who's been down it, you'll find piles of resources claiming CSS and JS flags will give you what you want but it never really gets there.

The only way to actually get true aliased brushes in canvas is implementing a line drawing algorithm manually and drawing down aliased circles like how https://gifpaint.com/ & https://jspaint.app/ do it.

And doing it this way is slooowww in JS

This property is already applied if you inspect the canvas elements. Better solution could be context SVG filters https://stackoverflow.com/a/49357655/342095 https://stackoverflow.com/a/68372384/342095

I've never used the original so this might be a faithful reproduction of the original (it's kind of cool), but it looks like the line tool and the multicoloured tool interact weirdly, and it doesn't erase the previous line when you move the mouse, instead you get a cool fan of colour instead. I was expecting a single line, but had more fun with it as it is, which is why I suspect it might not actually be a bug after all.

It's possible to avoid this issue. I implemented a Canvas based clone of the classic MS Paint back in the days. One of the tricks to avoid this, was to use decimal pixel coordinates, so instead of drawing a pixel at (100, 200), you would draw at (100.5, 200.5).

That's not a complete solution. For instance, it assumes that each canvas pixel corresponds to a single logical pixel, and that each logical pixel corresponds to a single physical pixel. There are a number of reasons that might not be true.

Reply on news.ycombinator.com