Blurring when the canvas is resized

p5.js
1

Hello
i’m working on a project where the canvas would be resized constantly depending on what the user is drawing. but i have a problem where the more i use resizeCanvas function the drawings on the canvas gets more and more blurred…i tried using pixelDensity and smooth() functions but to no avail…how can i fix this?
the canvas contains only p5 shapes/renders, there are no images or the like on the canvas

please help

thanks

2

Without the code it’s hard to say, but my guess is that when the canvas is resized, the content is scaled accordingly. Imagine using a paint, photoshop, gimp etc and you shrink the whole image and stretch it back. Perhaps you can avoid it by having a p5.Graphics object to store the “raw” image, and show it on the canvas so that object is independent of the canvas size. You may need to work on mapping of mouse position to the position on Graphics object, though.