Zoom and save as png

p5.js Coding Questions
1

I can save my canvas as a .png :slight_smile: 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

2

Look at scale() in the reference

Use it before drawing the dungeon

Use translate to place the dungeon in the center

3

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

4

Huh, it seems to work in this simple sketch:

https://editor.p5js.org/jwglazebrook/sketches/TeuVm2jUR

click to save

5

I don’t think you need to zoom in to get your square section saved. I would use the get() function to get a specific section of your canvas and load this section into a PGraphics object. The final step is to save this PGraphics using 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

1 Like