CODEWITHSUNDEEP
javascriptcssp5.js
Rox
Rox

Reputation: 19

Browser zoom and cursor coordinate problem

I'm making a project using P5.js and I'm having a problem. I need to let the user zoom out, but not zoom in, above 100% zoom. I achieved this with CSS (max-width: 100%, max-height: 100%). But there is a need to somehow compensate for the difference in coordinates. Here is a link to a sketch showing the problem.

What's the best way to keep the ratio of the square and cursor coordinates when scaling on any screens?

UPD: I found a solution:

let cnv;
 
function setup() {
    cnv=createCanvas(windowHeight, windowHeight );
    cnv.style("width", 'unset');  
}

Upvotes: 0

Views: 73

Answers (1)

Leo
Leo

Reputation: 404

This will make the mouse coordinate between 0 and 1:

text("Mouse position  = " + mouseX / width, 30, 40);

The variable width is the canvas width.

Upvotes: 1

Related Questions