Canvas & Save Image output sizes

p5.js Coding Questions
1

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!

2

Hi! Welcome to the forum :wave:

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

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

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

1 Like
3

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