Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get Canvas to dynamically resize when browser window is resized

I've got a canvas set up on my webpage with a js animation running in it that fills the entire browser window but when I resize the window I can't seem to get the canvas to resize automatically to fit the new window size. Can someone tell me what I need to add to my js to get this function properly? Thanks!

var canvas = document.getElementById('canvas');
var makecodeplay = canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
makecodeplay.fillStyle = "rgb(75,77,81)";
makecodeplay.fillRect(0, 0, canvas.width, canvas.height);

function randomPaint(inX, inY) {
   
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);
    var r, g, b;
    r = Math.floor(Math.random() * 255);
    g = Math.floor(Math.random() * 255);
    b = Math.floor(Math.random() * 255);
    makecodeplay.beginPath();
    makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
    makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
    makecodeplay.fill();
    makecodeplay.closePath();

    makecodeplay.beginPath();
    makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
    makecodeplay.lineWidth = 10;
    makecodeplay.moveTo(inX, inY);
    makecodeplay.lineTo(x, y);
    makecodeplay.stroke();
    makecodeplay.closePath();

    makecodeplay.beginPath();
    makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
    makecodeplay.lineWidth = 4;
    makecodeplay.moveTo(inX, inY);
    makecodeplay.lineTo(x, y);
    makecodeplay.stroke();
    makecodeplay.closePath();

    makecodeplay.beginPath();
    makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
    makecodeplay.lineWidth = 1;
    makecodeplay.moveTo(inX, inY);
    makecodeplay.lineTo(x, y);
    makecodeplay.stroke();
    makecodeplay.closePath();
     
  setTimeout(function () {
        randomPaint(x, y)
    }, 100);
}

randomPaint(1, 1);
        

html, body { 
	margin: 0; 
	padding: 0;
	width:  100%;
	height: 100%;
}

html {
	background-color: "#555761";
	background: "#555761";
}

body {
	font-family: "brandon-grotesque";
	font-wieght: 100;
	font-style: normal;
	color: #656771;
	bgcolor: "#555761";
}

p {
	font-family: "brandon-grotesque";
	font-wieght: 100;
	font-style: normal;
	color: #656771;
}

a {
	color: #555761;
}

a:link {
	color: #555761;
	text-decoration: none;
}

a:visited {
	color: #555761;
	text-decoration: none;
}

a:hover {
	color: #656771;
	text-decoration: none;
}

a:active {
	color: #555761;
	text-decoration: none;
}

/* Auto center content in window */
#stage {
	width:100%; 
	margin: 0 auto;
	padding: 0;
	} 

#stage canvas, #overlay {
	position: absolute;
	margin: 0 auto;
	padding: 0;
	}

#overlay {
	margin: 0 auto;
	padding: 0;
}

#overlay p {
	color: #333;
	font-family: "museo-sans";
	font-weight: 900;
	font-style: normal;
	font-size: 14px;
}

.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	}

.centered-bottom {
	position: fixed;
	bottom: 3%;
	left: 50%;
	transform: translate(-50%, -0%);
	-webkit-transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>MAKECODEPLAY</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

		<script src="//use.typekit.net/uwk8rac.js"></script>
		<script>try{Typekit.load({ async: true });}catch(e){}</script>

    </head>
    <body>
        
        <div id="stage">
			<canvas id="canvas"></canvas>
			<div class="centered">
				<img src="img/makecodeplay-logo.png" alt="MAKECODEPLAY" height="70" width="771"></div>
			<div class="centered" style="margin-top:50px;">
				<p>SITE COMING SOON</p></div>
		  	<div class="centered-bottom">
		  		<footer>
 					<small>&copy; Copyright 2015, MAKECODEPLAY</small>
				</footer>
			</div>
		</div>
    </body>
</html>
like image 622
greyBow Avatar asked Aug 20 '15 13:08

greyBow


People also ask

How do you dynamically resize canvas?

Resizing the canvas on the fly is quite easy. To do it, simply set the width and height properties of the Canvas object, and then redraw the canvas contents: Canvas . width = 600 ; Canvas .

How do I stop a browser window from resizing after a specific size?

Prevent Browser Resize Css CSS can be used to prevent browser resizing. By using the max-width property, you can set a maximum width for the browser window. If the browser window is resized to be smaller than the max-width, the browser will automatically adjust the size of the elements on the page.

How do I make my canvas fit the screen in HTML?

Set the Size with CSSto set the canvas's width and height both to 100%. We also set the position to absolute and top , left , right , and bottom to 0 to make the canvas fill the screen. Also, we make the html and body elements fill the screen by setting the width and height to 100%.


2 Answers

This solution has a flicker effect on resize, but it looks good at any size.

By fully using JQuery in changing the width/height, it got rid of the flicker. Here's an improved version:

JS:

$(function(){
    resizeCanvas();
});

$(window).on('resize', function(){
    resizeCanvas();
});

function resizeCanvas()
{
    var canvas = $('#canvas');
    canvas.css("width", $(window).width());
    canvas.css("height", $(window).height());
}

JSFiddle

The reason for using JQuery instead of using plain CSS is that the background canvas is absolutely positioned.

A JQuery hack isn't preferable if it can be helped, but it seems like the best choice for this situation.

like image 194
Zachary Dow Avatar answered Nov 05 '22 22:11

Zachary Dow


There is a event handler for detecting window resizes: https://developer.mozilla.org/de/docs/Web/API/GlobalEventHandlers/onresize

so you could do something like

window.onresize = function()
{
    var canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.style.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.height = window.innerHeight;
}
like image 45
TOAOGG Avatar answered Nov 05 '22 20:11

TOAOGG