10.1 Canvas Basics
Canvas API gives developers great tools to create 2D graphics and animations in web apps. In this lecture, we'll go over the basics of working with the Canvas API, including creating elements, drawing graphics, and making animations.
Creating a <canvas> element
The <canvas> element in HTML is used to create a drawing area where you can do various graphic operations:
<canvas id="myCanvas" width="800" height="600"></canvas>
Getting the Drawing Context
To perform drawing operations on a <canvas> element, you need to get the drawing context. For 2D graphics, use the 2d context:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
10.2 Drawing on Canvas
1. Rectangles
The Canvas API provides methods for drawing filled and outlined rectangles.
Filled rectangle — fillRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>
Outlined rectangle — strokeRect:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
</script>
</body>
</html>
Clearing the Area
The clearRect method is used to clear a specific area:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(200, 10, 150, 100);
ctx.clearRect(0, 0, 800, 600);
</script>
</body>
</html>
2. Lines
To draw lines, use the beginPath method to start a new path and the methods moveTo and
lineTo to define line coordinates:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.lineTo(150, 300);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
3. Circles and Arcs
The arc method is used to draw circles and arcs:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(400, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
4. Text
The fillText and strokeText methods are used for drawing text:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas', 10, 350);
</script>
</body>
</html>
5. Gradients
The Canvas API supports creating linear and radial gradients.
Linear Gradient:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);
</script>
</body>
</html>
Radial Gradient:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const radialGradient = ctx.createRadialGradient(400, 200, 20, 400, 200, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'green');
ctx.fillStyle = radialGradient;
ctx.fillRect(300, 100, 200, 200);
</script>
</body>
</html>
6. Images
The drawImage method is used to draw images on Canvas:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg';
</script>
</body>
</html>
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 256, 256);
};
img.src = 'path/to/image-1.jpg';
</script>
</body>
</html>
10.3 Animations on Canvas
The requestAnimationFrame method is used to create animations by calling a specified function to draw a new animation frame.
1. Animation Basics
Example of a simple animation:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
2. Complex Animations
Example of a circle animation:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function animateCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.arc(centerX + Math.cos(angle) * 100, centerY + Math.sin(angle) * 100, radius, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
angle += 0.05;
requestAnimationFrame(animateCircle);
}
animateCircle();
</script>
</body>
</html>
3. Using Timers
You can also use setInterval and setTimeout to create animations.
Example of animation using setInterval:
<html>
<head>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50);
x += 2;
y += 2;
}
setInterval(draw, 30);
</script>
</body>
</html>
GO TO FULL VERSION