Canvas is used to draw static graphics and to create animations, each handled separately using JavaScript.
- Draws a static smiley face using Canvas shapes like arcs and rectangles.
- Creates a separate bouncing circle animation using position updates and boundary detection.
- Uses requestAnimationFrame to smoothly animate the moving object.
HTML Canvas
HTML Canvas is a powerful drawing surface that allows developers to create graphics and animations using JavaScript. It enables direct rendering of shapes, images, and motion within the browser.
- Supports dynamic drawing using JavaScript.
- Ideal for creating lightweight animations and visual effects.
Creating A Smiley
Creating a smiley using HTML Canvas involves drawing simple shapes such as circles and arcs with JavaScript. By combining these shapes, a clean and visually appealing smiley face can be rendered on the canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(2, 28, 20);
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
canvas{
background-color: white;
border-radius: 5px;
}
</style>
<body>
<canvas id="canvas" width="350" height="350"></canvas>
</body>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const scale = 0.6;
ctx.scale(scale, scale);
// face
ctx.beginPath();
ctx.arc(300,300,200,0,Math.PI*2);
ctx.fillStyle="yellow";
ctx.fill();
ctx.strokeStyle="black";
ctx.stroke();
// eyes
ctx.beginPath();
ctx.arc(400,250,30,0,Math.PI*2);
ctx.arc(200,250,30,0,Math.PI*2);
ctx.fillStyle="black";
ctx.fill();
// mouth
ctx.beginPath();
ctx.arc(300,350,100,0,Math.PI);
ctx.fillStyle="black";
ctx.fill();
// teeth
ctx.fillStyle="white";
ctx.fillRect(240,350,30,20);
ctx.strokeRect(240,350,30,20);
ctx.fillRect(280,350,30,20);
ctx.strokeRect(280,350,30,20);
ctx.fillRect(320,350,30,20);
ctx.strokeRect(320,350,30,20);
</script>
</html>
 Output :
- Creates an HTML canvas element with fixed width and height, styled with a white background and rounded corners.
- Applies page styling to center the canvas on a dark green background with no margins or padding.
- Uses the canvas rendering context to draw a yellow circular face with eyes and a mouth using arcs.
- Adds teeth by drawing small white rectangular shapes inside the mouth.
Creating Bouncing Ball
Creating a bouncing ball using HTML Canvas demonstrates how to animate objects by updating their position and handling boundary collisions with JavaScript.
Â
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(2, 28, 20);
display: flex;
align-items: center;
color: black;
justify-content: center;
height: 100vh;
}
canvas{
border-radius: 5px;
background-color: rgb(255, 255, 255);
}
</style>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
const canvas=document.getElementById("canvas")
const ctx=canvas.getContext('2d')
const circle={
x:300,
y:300,
radius:40,
dx:5,
dy:4
}
function drawcircle(){
ctx.beginPath()
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2)
ctx.fillStyle="pink"
ctx.fill()
}
drawcircle()
function update(){
//ctx.clearRect(0,0,canvas.width,canvas.height)
drawcircle()
circle.x+=circle.dx
circle.y+=circle.dy
if (circle.x+circle.radius>canvas.width||circle.x-circle.radius<0){
circle.dx*=-1
}
if (circle.y+circle.radius>canvas.height||circle.y-circle.radius<0){
circle.dy*=-1
}
requestAnimationFrame(update)
}
update()
</script>
</html>
 Output :
- Displays an HTML canvas element styled with a white background and rounded corners for drawing graphics.
- Uses JavaScript to access the canvas and its 2D rendering context.
- Defines a circle object with position, radius, and velocity to represent the moving ball.
- Animates the circle using requestAnimationFrame while reversing direction on canvas boundary collisions.