<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.