Reputation: 1348

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>

Upvotes: 5

Answers (4)

TOAOGG

Reputation: 392

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

Upvotes: 7

M H

Reputation: 2182

This adjusts the resolution of the canvas. canvas.width=window.innerWidth; canvas.height=window.innerHeight;

Add styles width:100% and height:100% to the canvas class to make the canvas full width and height.

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

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

        
   
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div id="stage">
            <canvas id="canvas" style="width:100%; height:100%;"></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>

Upvotes: 4

Zachary Dow

Reputation: 1947

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

Upvotes: 6

rgunning

Reputation: 568

This has been answered before https://stackoverflow.com/a/7863738/1619663

~~Try setting the canvas dimensions to the screen dimensions rather than window dimensions.~~

i.e.

canvas.width=screen.width; canvas.height=screen.height;

See JSFiddle: https://jsfiddle.net/rjgunning/wLbzv7e0/

Upvotes: -1

Get Canvas to dynamically resize when browser window is resized

Answers (4)

Related Questions