# Preserve quality when CSS scaling?

**URL:** <https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223>\
**Category:** p5.js\
**Created:** [May 22, 2021, 7:21pm UTC](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223 "2021-05-22T19:21:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Post date:** [May 22, 2021, 7:21pm UTC](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223/1 "2021-05-22T19:21:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [May 22, 2021, 8:29pm UTC](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223/2 "2021-05-22T20:29:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Post date:** [May 22, 2021, 8:44pm UTC](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223/3 "2021-05-22T20:44:32Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [May 22, 2021, 8:51pm UTC](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223/4 "2021-05-22T20:51:00Z")

</div>

Use that same SVG as an image in your webpage?

---

<div class="post-metadata">

**Author:** ![Gershy13](https://avatars.discourse-cdn.com/v4/letter/g/a183cd/32.png) [@Gershy13](https://discourse.processing.org/u/Gershy13)\
**Post date:** [May 22, 2021, 10:05pm UTC](https://discourse.processing.org/t/preserve-quality-when-css-scaling/30223/5 "2021-05-22T22:05:08Z")

</div>

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'));`