13
rated 0 times
[
19]
[
6]
/ answers: 1 / hits: 15814
/ 9 Years ago, thu, august 20, 2015, 12:00:00
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>© Copyright 2015, MAKECODEPLAY</small>
</footer>
</div>
</div>
</body>
</html>
More From » html
