CODEWITHSUNDEEP
javascripthtmlcssp5.js
thesimg
thesimg

Reputation: 338

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

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");
    }
  }
}

Upvotes: 2

Views: 1098

Answers (2)

Ulti
Ulti

Reputation: 543

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'.

Upvotes: 0

DavidWeiss2
DavidWeiss2

Reputation: 395

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])

Upvotes: 1

Related Questions