vikrum / kidpix

JSKIDPIX v1.0.2021
https://kidpix.app/
GNU General Public License v3.0
611 stars 26 forks source link

Line is drawn with anti-aliasing #16

Closed skeddles closed 3 years ago

skeddles commented 3 years ago

Not sure how you're drawing the lines, but I doubt they have anti-aliasing in the original.

For my app I created my own line drawing function which draws a rectangle at each point in the line: https://github.com/lospec/pixel-editor/blob/master/js/_drawLine.js

vikrum commented 3 years ago

First of all, I love the lospec pixel editor! Thank you for making it and maintaining it.

Early on, I made a decision to defer many of the primitives to the underlying canvas APIs. You'll see the circles, lines, gradients, and in some places the png alpha, are all little design forks in the road I had to take. On the other hand, there are some places where the original public domain/freeware assets (stamps, hidden picture eraser, etc) have exaggerated pixelization. I think there's a happy medium where it is now and I'm loving what people are making with this weird juxtoposition. The stark contrast between the two gives them a wonderful feeling. A couple of examples:

https://twitter.com/the_nomi/status/1424232809304973318/photo/1

https://twitter.com/Nekojiima/status/1425240820567875586

https://twitter.com/lunchbagmonster/status/1424581779873099782/photo/1

That being said, I'm not opposed to a high-fidelity port that converges to parity with the original. Maybe there's a toggle? Or, as all of the features are completed, there can be a chooser behind subdomains?

I just have to carve out a lot more free time to find and do it 😹

SMUsamaShah commented 3 months ago

How about image-rendering: pixelated; https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering ?

SMUsamaShah commented 3 months ago

Just found that image-rendering: pixelated is already set on all canvas elements in the app.

Another solution could be context SVG filters https://stackoverflow.com/a/49357655/342095 https://stackoverflow.com/a/68372384/342095