Menu
Hello :) i am currently trying to resize my canvas whenever someone resizes their browser window. Here is my code so far:
html:
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="libraries/p5.js">
</script>
<script language="javascript" src="libraries/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js">
</script>
<script language="javascript" type="text/javascript" src="blob.js">
</script>
<title>USGame</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
</style>
</head>
<body>
</body>
</html>
and here is my js file:
var blob;
var blobs = [];
var zoom = 1;
function setup() {
createCanvas(1500, 600);
blob = new Blob(0, 0, 64);
for (var i = 0; i <100; i++) {
var x = random(-width,width);
var y = random(-height,height);
blobs[i] = new Blob(x, y, 8);
}
}
function draw() {
background(3, 3, 40);
translate(width/2, height/2);
var newzoom = 64 / blob.r;
zoom = lerp(zoom, newzoom, 0.1);
scale(zoom);
translate(-blob.pos.x, -blob.pos.y);
for (var i = blobs.length-1; i >=0; i--) {
blobs[i].show();
if (blob.eats(blobs[i])) {
blobs.splice(i, 1);
}
}
blob.show();
blob.update();
}
where it says:
createCanvas(1500, 600);
i am setting the fixed width and height, when i really want these to adjust to fit someone's browser window. Please explain how i can do this! Thank you!
597
Hi :) As it seems from your question, you are using p5.js library, which has a built-in function (event) called windowResized(), that you could use. This function fires on every resize of the browser window.
Once its fired, you can use another built-in function called resizeCanvas(), to resize the canvas size, so that it matches the browser window's width and height.
Here is a quick example, showing how you could use these functions ...
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background('#222');
ellipse(windowWidth / 2, windowHeight / 2, 100, 100);
fill('#07C');
noStroke();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}body{margin:0;overflow:hidden}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.min.js"></script>You can use it.
(function() {
// get the precentage of height and width of the cavas based on the height and width of the window
getPercentageOfWindow = function() {
var viewportSize = getViewportSize();
var canvasSize = getCanvastSize();
return {
x: canvasSize.width / (viewportSize.width - 10),
y: canvasSize.height / (viewportSize.height - 10)
};
};
//get the context of the canvas
getCanvasContext = function() {
return $("#myCanvas")[0].getContext('2d');
};
// get viewport size
getViewportSize = function() {
return {
height: window.innerHeight,
width: window.innerWidth
};
};
// get canvas size
getCanvastSize = function() {
var ctx = getCanvasContext();
return {
height: ctx.canvas.height,
width: ctx.canvas.width
};
};
// update canvas size
updateSizes = function() {
var viewportSize = getViewportSize();
var ctx = getCanvasContext();
ctx.canvas.height = viewportSize.height * percentage.y;
ctx.canvas.width = viewportSize.width * percentage.x;
};
var percentage = getPercentageOfWindow();
$(window).on('resize', function() {
updateSizes();
});
}());canvas {
border: 1px dotted black;
background: blue;
}<canvas id="myCanvas" width="300" height="300" >And here is the workable link.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
