5 ms·

https://github.com/vikrum/kidpix/issues/16 https://github.com/vikrum/kidpix/issues/16 It appears because the underlying HTML5 Canvas tools are being used, thin

https://github.com/vikrum/kidpix/issues/16 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!

smusamashah 2y ago
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-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rende...
- smusamashah 2y ago
  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/49357655/342095 https://stackoverflow.com/a/68372384/342095 https://stackoverflow.com/a/68372384/342095
- whywhywhywhy 2y ago
  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://gifpaint.com/ & https://jspaint.app/ https://jspaint.app/ do it.
  - endemic 2y ago
    And doing it this way is slooowww in JS
ralferoo 2y ago
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.
djxfade 2y ago
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).
- recursive 2y ago
  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.

smusamashah 2y ago

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-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rende...

smusamashah 2y ago
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/49357655/342095 https://stackoverflow.com/a/68372384/342095 https://stackoverflow.com/a/68372384/342095
whywhywhywhy 2y ago
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://gifpaint.com/ & https://jspaint.app/ https://jspaint.app/ do it.
- endemic 2y ago
  And doing it this way is slooowww in JS

ralferoo 2y ago

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.

djxfade 2y ago

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

recursive 2y ago
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.