CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
Mav
Mav

Reputation: 1190

Canvas leaves an "imprint" outside when arcs near the edge enlarged

This is hard to explain in words, rather I uploaded the site here to demonstrate the problem. There's a snippet below that has the code and simulates the same problem.

Notice how when you scroll down, and hover near the edge, white imprints are left outside the canvas on neighbouring divs. Why does this happen, and how do I fix it?

var canvas = document.querySelector('canvas');

canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;

var context = canvas.getContext('2d');

var mouse = {
	x: undefined,
	y: undefined
}

window.addEventListener('mousemove', function(event){
	mouse.x = event.x;
	mouse.y = event.y;
});

function Circle(x, y, dx, dy, radius, bg){
	this.x = x;
	this.y = y;
	this.dx = dx;
	this.dy = dy;
	this.radius = radius;
	this.defaultRadius = radius;
	this.bg = bg;

	this.draw = function(){
		context.beginPath();
		context.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
		context.fillStyle = this.bg;
		context.fill();
	}

	this.update = function(){
		if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
			this.dx = -this.dx;
		}

		if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
			this.dy = -this.dy;
		}

		if (this.x - mouse.x < 50 && this.x - mouse.x > -50 && this.y - mouse.y < 50 && this.y - mouse.y > -50) {
			if (this.radius < 30) {
				this.radius += 5;
			}
		} else {
			if (this.radius > this.defaultRadius) {
				this.radius -= 1;
			}
		}

		this.x += this.dx;
		this.y += this.dy;
		
		this.draw();
	}
}

var circlesArray = [];

for(var i = 0; i < 300; i++){
	addNewCircle();
}

function addNewCircle(){
	var radius = (Math.random() * 2) + 1;
	var x = (Math.random() * (innerWidth - (radius*2))) + radius;
	var y = (Math.random() * (innerHeight - (radius*2))) + radius;
	var dx = Math.random() - 0.5;
	var dy = Math.random() - 0.5;
	var bg = 'rgba(255, 255, 255, 0.1)';

	circlesArray.push(new Circle(x, y, dx, dy, radius, bg));
}

function animate(){
	requestAnimationFrame(animate);
	context.clearRect(0, 0, innerWidth, innerHeight);

	for(var i = 0; i < circlesArray.length; i++){
		circlesArray[i].update();
	}
}

animate();
*{
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	color: rgba(0,0,0, 0.8);
}

#page{
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
}

#page canvas{
  position: absolute;
  top: 0;
  left: 0;
}

#top-bar{
  width: 100%;
  height: 200px;
  background: black;
}
<!DOCTYPE html>
<html>
<body>
  <div id="page">
    <canvas></canvas>
  </div>
  
  <div id="top-bar">
  
  </div>
</body>
</html>

Upvotes: 1

Views: 40

Answers (1)

Joe Fitzsimmons
Joe Fitzsimmons

Reputation: 1063

Your canvas is setting height based on body, but your #top-bar div is taking up some of that space.

So that extra space is where you #top-bar div is

You could set the canvas size to be (body - #top-bar height).

Upvotes: 2

Related Questions