search

hunkim98 / dotting

Dotting is a pixel art editor component library for react
https://hunkim98.github.io/dotting/
MIT License
46 stars 12 forks source link

Large canvas rendering artifacts #114

Open styopaiv opened 2 months ago

styopaiv commented 2 months ago

I'm trying to render a 256x256 pixel canvas but am encountering some rendering artifacts, and I can't seem to find a solution for achieving a smooth image. I hope you can see what I’m referring to in the screenshot: image

I also have an example of a 256x256 canvas where the image appears really smooth. I’m not sure if the issue is related to pixel sizing or browser rendering, but their image is much clearer: image

Could you provide any advice on where I should focus? Thanks so much for this awesome library, by the way—huge work!

hunkim98 commented 2 months ago

Thank you for your interest in this library! I am not sure how you are going to render the image. Are you planning to extract all the pixels from the image and then fill in the canvas?

styopaiv commented 2 months ago

That's just a screenshot of another implementation of a pixel art component (which is not open source), and i can't figure out how did they achieve such clear render with no visual artifacts. Sorry, i wasn't clear enough about what that second screenshot is. Its basically a screenshot of a simpler version of dotting like component, without panning and zooming. Just a canvas of 256x256 on which you can put pixels on. So again. my problem is that dotting has this weird rendering issue on a big grid when its zoomed out enough, so that you can see the whole canvas and the other implementation doesn't have this. Trying to figure out what could cause that.

hunkim98 commented 1 month ago

Could you record a video of the weird rendering issue? A vide might help me understand the issue!