P5.js: Moving canvas around screen dynamically rather than fixed at beginning with setup().

[NamanSharma5]

Most appropriate sub-area of p5.js?

• [x] Core/Environment/Rendering

Feature enhancement details:

Can you add functionality (if it does not already exist) , allowing users to move the canvas around based on button presses/ window resizing /etc ? This would be ideal if users resize the window allowing for canvas to be made smaller and re-positioned.

This can be facilitated through the draw loop or event listeners; where the current .position function does not work.
Currently users can only set position in setup loop - not good for relocating canvas

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[montoyamoraga]

hi @NamanSharma5, thank you for your suggestion!

we have functions intended for this, maybe it should be converted to a tutorial?

i wrote this script for showing how to re-position the canvas

https://editor.p5js.org/montoyamoraga/sketches/2Zxxu_GxA

and here i am pasting it too :)

// variable to store canvas object
let myCanvas = null;

// variables for storing an offset to compensate for change of origin
let offsetX = 0;
let offsetY = 0;

function setup() {

// create canvas with p5.js and store its reference on myCanvas variable
myCanvas = createCanvas(400, 400);

}

function draw() {

// red background
background(200, 0, 0);

// while mouse is pressed, green background
if (mouseIsPressed) {
background(0, 200, 0);
}

}

// every time the mouse is released
function mouseReleased() {

// print to console current mouse position and offset
console.log("mouse", mouseX, mouseY, "offset", offsetX, offsetY);

// move canvas to the new position of the mouse
// origin of system is always on upper left corner of canvas
// so new position is mouse position + offset
myCanvas.position(mouseX + offsetX, mouseY + offsetY);

// update the offset
offsetX = offsetX + mouseX;
offsetY = offsetY + mouseY;

}

[rt1301]

In the above example, if the myCanvas.position code is implemented while the mouseIsPressed, the canvas will move in a smoother manner