How can i save a small canvas with high resolution 8k image file

p5.js Coding Questions
1

please format code with </> button * homework policy * asking questions

i have a canvas of 500x500 .and i want to save the canvas as a super high resolution image. but i don’t know how to do it. i don’t wanna to increase the canvas size because it become bigger then my screen.

2

Hi @biard.
You could use a PGraphics and resize it without displaying it, and then save it.

3

hi there @noel can you please describe it with an example. Because i’m new in p5.js or processing.

4

In P5.java this is working quite well.
I translated it to P5.js, but I don’t know where the file is saved.
If you find out, tell me.

let pg;

function setup() {
  createCanvas(500, 400);
  strokeWeight(5);
  background(255); 
  pg = createGraphics(1500, 1200);
  noLoop();
}

function draw() {
  line(0, 0, width, height);
  line(0, height, width, 0);
  pg.line(0, 0, pg.width, pg.height);
  pg.line(0, pg.height, pg.width, 0);
}

function mousePressed () {
  pg.save("myImage.jpg");
}
1 Like
5

Thanks :revolving_hearts: :v: @noel it Works. i’m using visual studio code with chrome. So when i pressed the mouse it download the file.
i think it will save in the same directory. because you haven’t specify the location of it.

1 Like