CODEWITHSUNDEEP
javascripthtml5-canvas
Alex
Alex

Reputation: 2402

Javascript canvas drawing - shape is filled

I am trying to draw a series of circles orbiting a central point, a very, very basic version of this: https://mgvez.github.io/jsorrery/

I have managed this so far, but the shape is filled, and I'm not sure why. It actually looks pretty cool, but not what I wanted ;)

var origin_x = 200;
var origin_y = 200;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

class planet {
	constructor(orbital_velocity, orbital_radius, radius) {
		this.orbital_velocity = orbital_velocity;
		this.orbital_radius = orbital_radius;
		this.radius = radius;
		this.draw()
	}

	draw() {
	  const theta = t*this.orbital_velocity
	  const x  = origin_x + this.orbital_radius*Math.cos(theta) 
	  const y  = origin_y + this.orbital_radius*Math.sin(theta) 
	  ctx.arc(x, y, this.radius, 0, 2*Math.PI, 'anticlockwise')
	  ctx.fill();
	}
}


let t = 0;
window.setInterval(function(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
	const a = new planet(2*Math.PI, 30, 1 );
	const b = new planet(Math.PI, 50, 1 );
	const c = new planet(0.5*Math.PI, 70, 1 );
	const d = new planet(0.25*Math.PI, 90, 1 );
	t += 0.1;
}, 40);
<!DOCTYPE html>
<html lang="en">
  <head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
	  <div class="container-fluid">
		  <div class="row">
			  <div class="col text-center">
				  <canvas id="canvas" width="400" height="400" />
			  </div>
		  </div>
	  </div>
  </body>
</html>

I've read the docs, but I can't figure out why this is happening... I need the individual circles (arcs) to be filled, not the shape between them...

Upvotes: 0

Views: 23

Answers (1)

Jan
Jan

Reputation: 2853

You need to call ctx.beginPath() and ctx.closePath(), otherwise the canvas thinks you are drawing a complex element/polygon and tries to fill that.

var origin_x = 200;
var origin_y = 200;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

class planet {
	constructor(orbital_velocity, orbital_radius, radius) {
		this.orbital_velocity = orbital_velocity;
		this.orbital_radius = orbital_radius;
		this.radius = radius;
		this.draw()
	}

	draw() {
	  const theta = t*this.orbital_velocity
	  const x  = origin_x + this.orbital_radius*Math.cos(theta) 
	  const y  = origin_y + this.orbital_radius*Math.sin(theta) 
    ctx.beginPath();
    ctx.arc(x, y, this.radius, 0, 2*Math.PI, 'anticlockwise')
	  ctx.fill();
    ctx.closePath();
	}
}


let t = 0;
window.setInterval(function(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();
	const a = new planet(2*Math.PI, 30, 1 );
	const b = new planet(Math.PI, 50, 1 );
	const c = new planet(0.5*Math.PI, 70, 1 );
	const d = new planet(0.25*Math.PI, 90, 1 );
	t += 0.1;
}, 40);
<!DOCTYPE html>
<html lang="en">
  <head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
	  <div class="container-fluid">
		  <div class="row">
			  <div class="col text-center">
				  <canvas id="canvas" width="400" height="400" />
			  </div>
		  </div>
	  </div>
  </body>
</html>

Upvotes: 2

Related Questions