Hello I have this interactive canvas as a background of my web, it is on 100% width and high, but when I add content that continues longer than canvas and you have to scroll down, canvas is not repeating down y axis.
Also can anyone tell how can i center align absolute positioned <div>.
I added white box that is longer than canvas, if you scroll down you start to see black background, how can I make canvas repeat down y-axis and how do i center that white box (which is absolute positioned div)
Here is code:
Also can anyone tell how can i center align absolute positioned <div>.
I added white box that is longer than canvas, if you scroll down you start to see black background, how can I make canvas repeat down y-axis and how do i center that white box (which is absolute positioned div)
Here is code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Canvas by Ilya</title>
<style>
body {
background: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}
canvas {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
body,td,th {
color: #000;
}
#repeattest {
background-color: #FFF;
position: absolute;
height: 2552px;
width: 88px;
left: 62px;
top: 1px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas height="600" width="600"></canvas>
<script>
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 600, 600);
ctx.save();
// Create radial gradient
grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#000');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
// assign gradients to fill
ctx.fillStyle = grad;
// draw 600x600 fill
ctx.fillRect(0,0,600,600);
ctx.save();
body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / width;
var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 0.01);
grad.addColorStop(0, '#000');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
// ctx.restore();
ctx.fillStyle = grad;
ctx.fillRect(0,0,600,600);
// ctx.save();
};
}
</script>
<div id="repeattest">
<p>Scroll</p>
<p> Down<br>
</p>
</div>
</body>
</html>
Comment