hunkim98 / dotting

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

Large canvas rendering artifacts #114

Open styopaiv opened 2 weeks ago

styopaiv commented 2 weeks 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 weeks 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 weeks 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.