Nischit Shetty's Blog

Nischit Shetty's Blog

Animated Canvas in JS

Animated Canvas in JS

Canvas element is used for drawing graphics. The graphics must only be drawn using javascript.

Various shapes and sizes can be drawn in canvas.

In this post, we will learning to create simple animation using <canvas>.

Setting up canvas

  1. Create two files - index.HTML and canvas.js

  2. Add <canvas> </canvas> tag and style it to make it visible using CSS. (we will be using CSS border )

  3. Go to canvas.js (remember to export it from HTML) and write the following code so that we can fit the canvas window to the browser window size.

let canvas = document.querySelector('canvas')

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Style margin of body to 0. It is a default parameter of HTML.

Now we have successfully setup canvas. Lets delve into making shapes in canvas.

Creating shapes in canvas

We can draw different shapes ranging from squares to lines and curves using canvas

To be able to draw let first import context

let c = canvas.getContext('2d')

To create a line use the following code

c.moveTo(0, 0); 
//moves the point to 0,0 
c.lineTo(200, 100);
 //creates the line from 0,0 to 200,100
c.stroke();  
// makes the line visible

We can also use create other shapes too


c.rect(20, 20, 150, 100);
//creates a rectangle from point 20, 20 of 150 x 100 pixels

c.fillRect(20, 20, 150, 100);
//creates a filled rectangle from point 20, 20 of 150 x 100 pixels

c.arc(20, 20, 15, 0, Math.PI*2, false);
// create a circle at point 20,20 of radius 15px. c.arc(x, y, radius, startingpoint, endpoint, counterclockwise)

For demo purposes we will be using a circle.

Animation

We will creating a function for the animation.

function animate() {
  requestAnimationFrame(animate);
 c.arc(100,100,30,0, Math.PI*2,false);
c.stroke();
}

animate();

The animation function works but we wont be to notice a change because the values remain constant. So lets use a variable for the same.


let x = 100;
let y = 100;

function animate(){
requestAnimationFrame(animate);
 c.arc(x,y,30,0, Math.PI*2,false);
c.stroke();
x+=1;
y+=1;
}

animate();

This however looks like a trail rather a circle moving. Lets add another canvas function clearRect so that the frame is cleared everytime the animate function gets called. we will also add collision parameters so that the circle remains in frame during animation.


let x = 100;
let y = 100;
let dx = 1;
let dy = 1;
let radius = 30;

function animate(){
requestAnimationFrame(animate);
c.clearRect(0, 0, window.innerWidth, window.innerHeight);
c.beginPath();
c.arc(x,y,radius,0, Math.PI*2,false);
c.stroke();
 if (x > window.innerWidth - radius || x < radius) {
      dx = -dx;
    }

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

    x += dx;
    y += dy;

}

animate();

Once done the animation should look like this Parcel Sandbox — Mozilla Firefox 2021-06-09 14-22-44.gif

This is how a simple animation was created using canvas and javascript. We will be creating more animations in further posts.

 
Share this