Preserve quality when CSS scaling?

I made a piece of art in p5Js, and its being displayed on a webpage, so i used CSS to make the canvas (by setting width,height:80%) fit slightly better on the page. Only problem with that is that the quality doesn’t look great. If i use a high res canvas (ideally what i want to do as i want to save the image for print), the image looks really aliased and the stroke lines are very thin. If i use the original resolution i designed it in (512,512), it looks blurry and i wouldnt be able to print that…

Also does anyone know of a way to export a higher resolution image than the canvas? could i export a 512x512 canvas as a 6000x6000 png maybe? While still being good quality.

When i use chrome’s zoom (and refresh the page to redraw) to make my 512x512 canvas look bigger, it looks really good, and ideally thats what i would like the final result to look like.

Thoughts on what i could do here?


Perhaps an SVG (scalable vector graphic) approach works better? For example:

Okay thanks that solves my problem for printing, now is there a way to display it better in the browser? (The canvas I mean)

It’s resolution of 512x512 is just about okay on my 1080p monitor, but if someone is on a 4k monitor or a high Res screen it’s going to look really small, and using CSS to scale it up proportionally makes it look pretty bad…

Use that same SVG as an image in your webpage?

Thanks, the only issue with that is, ive got customizable parameters, so the canvas updates in real time, and then the user presses a button which triggers the save file to svg (in its final form when they are done). If i were to do the drawing in the background and display only the svg on the page, then it would not update in realtime?

EDIT: Turns out I understood wrong, it doesnt just create an svg file, its a renderer for p5js, so it will work as i expect.

EDIT 2: Only problem is i cannot assign a parent to the SVG canvas? (to put the canvas in a div) Any idea how to do this?

EDIT 3: Fixed it. For anyone wondering how to do it, i used document.getElementById('YOURDIVHERE').appendChild(document.getElementById('defaultCanvas0'));

1 Like