How to scale down a p5.js canvas without losing resolution

user_15114774 0
Viewed 404

I have a p5.js canvas on my website, contained within a canvasDiv class, and I have a script that goes to the website and clicks the canvas, which downloads it etc. How do I scale down the canvas so that it doesn't take up most of the screen, while still keeping the 1000x1000px resolution? Thanks and have a good day!

HTML

<div id="canvasDiv">
  <script src="sketch.js" id="astrum"></script>
  <script src="functions.js"></script>
  <script src="shapes.js"></script>
</div>

CSS

#canvasDiv {
  display: block;
  width: 1000px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Source Code Pro', monospace;
}

JS

function setup() {
  const myCanvas = createCanvas(1000, 1000);
  myCanvas.parent('canvasDiv');
  background(40);
  angleMode(DEGREES);
  rectMode(CENTER);
  noStroke();
}


function mousePressed(){
  if(mouseX > 0 && mouseX < width){
    if(mouseY > 0 && mouseY < height){
      save("AM.png");
    }
  }
}
p5.js css html javascript
2 Answers

Use create graphics and draw to the graphics buffer with image() on the canvas. when you want someone to download make the download from the graphics buffer and not from the canvas. saveCanvas(selectedCanvas, [filename], [extension])

user_74533910

You could also have a hidden canvas behind, i think css has a property:

#real-Canvas { hidden: true }

Afterwards you could have the image or whatever you have scaled down on the first canvas that users see, as like a preview type thing, you could also do this with createGraphics i guess.

this is basically the same answer as DavidWeiss'.

user_144565230
Related