Hacker News Reader

Comment by Nition | Hacker News Reader

Really cool, I remember using this on a friend's computer in the early 90s. My only complaint is this has a smoothing alpha edge on the pencil and line tools, which gives that unfortunate white outline when using the paint bucket. KidPix is great, but gimmie that classic Nearest Neighbour behaviour.

View on HN

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!

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 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

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

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.

I think that the background colour for anti-aliasing is called "matte" in designer-speak.

.....

Reply on news.ycombinator.com