# Canvas & Save Image output sizes

**URL:** <https://discourse.processing.org/t/canvas-save-image-output-sizes/32934>\
**Category:** Coding Questions\
**Created:** [October 19, 2021, 3:02pm UTC](https://discourse.processing.org/t/canvas-save-image-output-sizes/32934 "2021-10-19T15:02:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![newreality](https://avatars.discourse-cdn.com/v4/letter/n/c6cbf5/32.png) [@newreality](https://discourse.processing.org/u/newreality)\
**Post date:** [October 19, 2021, 3:02pm UTC](https://discourse.processing.org/t/canvas-save-image-output-sizes/32934/1 "2021-10-19T15:02:39Z")

</div>

Hi All, please be easy on me as this is my first post and I’m quite new to coding, in general. However I have made some amazing progress these past few weeks.

I do have a question and I may be using the wrong terminology but here it goes.

Is there a way I can resize my canvas view on the web editor? For instance, I am building something that is 2000x2500 but its often too big for my screen to view. I need to keep these dimensions for when I save the image. Could anyone point me to techniques to “showing” a smaller canvas while having the ability to export 2000x2500?

Thank you so much for your time!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 19, 2021, 8:34pm UTC](https://discourse.processing.org/t/canvas-save-image-output-sizes/32934/2 "2021-10-19T20:34:42Z")

</div>

Hi! Welcome to the forum 👋

One way is to scale the canvas using css - maybe it’s not a familiar expression, but what it does is keeping the size of the canvas, it shows a shrunk version on HTML

```javascript
function setup() {
  createCanvas(2000, 2500).style('transform', 'scale(.2, .2)').style('transform-origin', 'top left'); // 1:5 scale
  background(255);
  for(let i = 0; i < width; i+=3) {
    line(i, 0, i, height);
  }
  noLoop();
}

```

[https://editor.p5js.org/micuat/sketches/YbT\_khdt0](https://editor.p5js.org/micuat/sketches/YbT_khdt0)

it would perhaps show very bad aliasing - and if you zoom in, you can see fine lines 🙂

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [October 21, 2021, 11:53am UTC](https://discourse.processing.org/t/canvas-save-image-output-sizes/32934/3 "2021-10-21T11:53:27Z")

</div>

Scaling the canvas with CSS wont actually help you export a high-res image .  
I did this a while back and ended up with the following concept.

Everything I draw has a scaleFactor, this is by default set to the value 1.  
Before exporting a high-res Image I resize and redraw the canvas and set the scaleFactor to something appropriate depending on the size i want to have.

After exporting I revert the values and resize the canvas back to the normal size.  
This worked suprsingly well.  
I dont have an isolated example. Let me know if you struggle with the concept.

[https://p5js.org/reference/#/p5/resizeCanvas](https://p5js.org/reference/#/p5/resizeCanvas)