# Zoom and save as png

**URL:** <https://discourse.processing.org/t/zoom-and-save-as-png/16729>\
**Category:** Coding Questions\
**Created:** [December 30, 2019, 4:27pm UTC](https://discourse.processing.org/t/zoom-and-save-as-png/16729 "2019-12-30T16:27:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![monk-e-boy](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@monk-e-boy](https://discourse.processing.org/u/monk-e-boy)\
**Post date:** [December 30, 2019, 4:27pm UTC](https://discourse.processing.org/t/zoom-and-save-as-png/16729/1 "2019-12-30T16:27:10Z")

</div>

I can save my canvas as a .png 🙂 how do I zoom it in first?  
I am creating a D&D grid, I would like to save it so each square is 1 inch across.  
I would like to save it with a transparent background.

[https://monk-e-boy.github.io/dungeon-mapper/#eJxVz00OwiAQBeC7zHpikEL5uYpxoZWFBiWpJLZpuLulxcTHAt63mDdhoTGl55v8aaGBvGUayXeF/6RAGmRBrslBi4MWBy27epABWdBvw1HAikaF1EiLdOXMlK6PMOT9+5m8ZJrW2yqmub7yYFw9sjOiF1oz3ciLOpjDtI2tMd5focXPJcYtli9L81pj](https://monk-e-boy.github.io/dungeon-mapper/#eJxVz00OwiAQBeC7zHpikEL5uYpxoZWFBiWpJLZpuLulxcTHAt63mDdhoTGl55v8aaGBvGUayXeF/6RAGmRBrslBi4MWBy27epABWdBvw1HAikaF1EiLdOXMlK6PMOT9+5m8ZJrW2yqmub7yYFw9sjOiF1oz3ciLOpjDtI2tMd5focXPJcYtli9L81pj)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 30, 2019, 4:33pm UTC](https://discourse.processing.org/t/zoom-and-save-as-png/16729/2 "2019-12-30T16:33:56Z")

</div>

Look at scale() in the reference

Use it before drawing the dungeon

Use translate to place the dungeon in the center

---

<div class="post-metadata">

**Author:** ![monk-e-boy](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@monk-e-boy](https://discourse.processing.org/u/monk-e-boy)\
**Post date:** [December 30, 2019, 4:41pm UTC](https://discourse.processing.org/t/zoom-and-save-as-png/16729/3 "2019-12-30T16:41:31Z")

</div>

This is what I’m playing with:

click save  
resizeCanvas(1200, 1200)  
push()  
scale(2.0)  
draw everything  
save()  
pop()  
resizeCanvas(600, 600)

…

this is not saving the png at 2 times the zoom, it is saving at normal zoom

---

<div class="post-metadata">

**Author:** ![monk-e-boy](https://avatars.discourse-cdn.com/v4/letter/m/bbce88/32.png) [@monk-e-boy](https://discourse.processing.org/u/monk-e-boy)\
**Post date:** [December 30, 2019, 4:52pm UTC](https://discourse.processing.org/t/zoom-and-save-as-png/16729/4 "2019-12-30T16:52:27Z")

</div>

Huh, it seems to work in this simple sketch:

[https://editor.p5js.org/jwglazebrook/sketches/TeuVm2jUR](https://editor.p5js.org/jwglazebrook/sketches/TeuVm2jUR)

click to save

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [December 30, 2019, 8:00pm UTC](https://discourse.processing.org/t/zoom-and-save-as-png/16729/5 "2019-12-30T20:00:03Z")

</div>

I don’t think you need to zoom in to get your square section saved. I would use the [get()](https://p5js.org/reference/#/p5/get) function to get a specific section of your canvas and load this section into a [PGraphics](https://p5js.org/examples/structure-create-graphics.html) object. The final step is to save this PGraphics using [save()](https://p5js.org/reference/#/p5/save) as describe in the reference.

You can keep the size of the PGraphics (ok in p5js is the object return by **createGraphics()** function) to be the same dimensions as the ones used for the `get()` function. If you wanted to have a zoom in effect, you can increase the dimension of the PGraphics before you load the image there.

Kf