Preserve quality when CSS scaling?

p5.js
1

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?

Thanks
Gershy13

2

Perhaps an SVG (scalable vector graphic) approach works better? For example: https://editor.p5js.org/dannyrozin/sketches/r1djoVow7

3

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…

4

Use that same SVG as an image in your webpage?

5

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