<html>
    <head>
        <title>Canvas</title>
    </head>
    <body>
        <!-- draw circle canvas block -->
        <canvas id="canvas1"></canvas>
        <!-- draw multiple circle canvas block -->
        <canvas id="canvas2"></canvas>
        <!-- animate single circle circle canvas block -->
        <canvas id="canvas3"></canvas>
        <!-- animate multiple circle canvas block -->
        <canvas id="canvas4"></canvas>
      <!-- animate multiple circle canvas block -->
      <canvas id="canvas5"></canvas>
      <!-- animate multiple circle with multiple color canvas block 
      <canvas id="canvas6"></canvas> -->
    </body>
</html>
canvas{
  border: 1px solid black;
}
body{
  margin: 0;
}

// Single Circle - Get Canvas element by Id
var canvas1 = document.getElementById( "canvas1" );

// Set Canvas dimensions
canvas1.width   = 200;
canvas1.height  = 200;

// Get drawing context
var c1 = canvas1.getContext( '2d' );

// Begin Path
c1.beginPath();

// Arc Operation
c1.arc( 50, 50, 30, 0, Math.PI * 2, false );

// Fill Stroke
c1.stroke();


// Multiple Circle - Get Canvas element by Id
var canvas2 = document.getElementById("canvas2");

// Set Canvas dimensions
canvas2.width   = 200;
canvas2.height  = 200;

// Get drawing context
var c2 = canvas2.getContext('2d');

// Iterate to draw 4 circles
for( var i = 0; i < 4; i++ ) {

	// Generate x and y values between 0 to 140 considering 30 pt radius
  	var x = 30 + Math.random() * 140;
  	var y = 30 + Math.random() * 140;

	// Begin Path
	c2.beginPath();

  	// Arc Operation
  	c2.arc( x, y, 30, 0, Math.PI * 2, false );

  	// Fill Stroke
  	c2.stroke();
}

// Single Animated Circle - Get Canvas element by Id
var canvas3 = document.getElementById("canvas3");

// Set Canvas dimensions
canvas3.width   = 200;
canvas3.height  = 200;

// Get drawing context
var c3 = canvas3.getContext( '2d' );

// Radius
var radius = 50;

// Starting Position
var x 	= radius + Math.random() * ( 200 - radius * 2 );
var y 	= radius + Math.random() * ( 200 - radius * 2 );

// Speed in x and y direction
var dx 	= (Math.random() - 0.5) * 2;
var dy 	= (Math.random() - 0.5) * 2;

function animate3() {

  	requestAnimationFrame( animate3 );

  	c3.clearRect( 0, 0 , 200, 200 );
 
  	if( x + radius > 200 || x - radius < 0  ) {

    		dx = -dx;
  	}

  	if(  y + radius > 200 || y - radius < 0 ) {

    		dy = -dy;
  	}

  	x += dx;
  	y += dy;

  	c3.beginPath();
  	c3.arc( x, y,  50, 0, Math.PI * 2, false  );
  	c3.stroke();
}

// Animate the Circle
animate3();

// Multiple Animated Circle - Get Canvas element by Id
var canvas4 = document.getElementById( "canvas4" );

// Set Canvas dimensions
canvas4.width   = 200;
canvas4.height  = 200;

// Get drawing context
var c4 = canvas4.getContext( '2d' );

// The Circle class
function Circle( x, y, dx, dy, radius ) {

	this.x 	= x;
	this.y 	= y;
	this.dx = dx;
	this.dy = dy;

	this.radius = radius;

	this.draw = function() {

		c4.beginPath();

		c4.arc( this.x, this.y,  this.radius, 0, Math.PI * 2, false  );

		c4.strokeStyle = "blue";
			
		c4.stroke();
	}

	this.update = function() {

		if( this.x + this.radius > 200 || this.x - this.radius < 0 ) {

			this.dx = -this.dx;
		}

		if( this.y + this.radius > 200 || this.y - this.radius < 0 ) {

			this.dy = -this.dy;
		}

		this.x += this.dx;
		this.y += this.dy;

		this.draw();
	}
}

var circles = [];

// Radius
var radius = 50;

for( var i = 0; i < 5; i++ )  {
	
	// Starting Position
	var x = Math.random() * ( 200 - radius * 2 ) + radius;
	var y = Math.random() * ( 200 - radius * 2) + radius;

	// Speed in x and y direction
  	var dx = ( Math.random() - 0.5 ) * 2;
  	var dy = ( Math.random() - 0.5 ) * 2;

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

function animate4() {
  
	requestAnimationFrame( animate4 );

	c4.clearRect( 0, 0, 200, 200 );

	for( var r = 0; r < 5; r++ ) {

		circles[ r ].update();
	}
}

animate4();

// Multiple Colored Animated Circle - Get Canvas element by Id
var canvas5 = document.getElementById( "canvas5" );

// Set Canvas dimensions
canvas5.width   = 200;
canvas5.height  = 200;

// Get drawing context
var c5 = canvas5.getContext( '2d' );

// The Circle class
function ColoredCircle( x, y, dx, dy, radius, color ) {

	this.x 	= x;
	this.y 	= y;
	this.dx = dx;
	this.dy = dy;

	this.radius = radius;
	this.color 	= color;

	this.draw = function() {

		c5.beginPath();

		c5.arc( this.x, this.y, this.radius, 0, Math.PI * 2, false );

		c5.strokeStyle = this.color;

		c5.stroke();
	}

	this.update = function() {

		if( this.x + this.radius > 200 || this.x - this.radius < 0 ) {

			this.dx = -this.dx;
		}

		if( this.y + this.radius > 200 || this.y - this.radius < 0 ) {

			this.dy = -this.dy;
		}

		this.x += this.dx;
		this.y += this.dy;

		this.draw();
	}
}

var coloredCircles = [];

var circleColors = [ 'red', 'green', 'blue', 'yellow', 'orange' ];

// Radius
var radius = 50;

for( var i = 0; i < 5; i++ )  {
	
	// Starting Position
	var x = Math.random() * ( 200 - radius * 2 ) + radius;
	var y = Math.random() * ( 200 - radius * 2) + radius;

	// Speed in x and y direction
  	var dx = ( Math.random() - 0.5 ) * 2;
  	var dy = ( Math.random() - 0.5 ) * 2;

	// Color
	var color = circleColors[ i ];

	coloredCircles.push( new ColoredCircle( x, y, dx, dy, radius, color ) );
}

function animate5() {
  
	requestAnimationFrame( animate5 );

	c5.clearRect( 0, 0, 200, 200 );

	for( var r = 0; r < 5; r++ ) {

		coloredCircles[ r ].update();
	}
}

animate5();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.