HTML
๐ What is HTML <canvas>
๐น1. What is Canvas?
The <canvas> element is a feature introduced in HTML5 and is used for drawing graphics.
๐ However, an important point: <canvas> does not display anything by itself. You need to use JavaScript to draw inside it.
HTML
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000;"></canvas >๐ This code creates a 300x150 empty area on the page. But since nothing is drawn, it will appear as just a blank box.
๐น2. Drawing a Simple Line
HTML
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000;"></canvas >
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();
</script >
๐ Draws a line from the top-left corner to the bottom-right corner.
๐น3. Drawing Rectangles
HTML
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000;"></canvas >
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
// Filled rectangle
ctx.fillStyle = "green";
ctx.fillRect(50, 30, 100, 50);
// Rectangle outline
ctx.strokeStyle = "blue";
ctx.strokeRect(180, 30, 100, 50);
</script >
- Draws a filled green rectangle
- Draws a blue outlined rectangle
๐น4. Drawing a Circle (arc)
HTML
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000;"></canvas >
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "skyblue";
ctx.fill();
ctx.stroke();
</script >
๐ Draws a circle centered at (100,100) with a radius of 50.
๐น5. Drawing Text
HTML
<canvas id="myCanvas" width="300" height="100" style="border:1px solid #000;"></canvas >
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText("Hello Canvas!", 10, 50);
ctx.strokeStyle = "blue";
ctx.strokeText("Outline Text", 10, 90);
</script >
- Displays filled red text
- Displays blue outlined text
๐น6. Gradient (Color Transition)
HTML
<canvas id="myCanvas" width="300" height="100" style="border:1px solid #000;"></canvas >
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "yellow");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 280, 80);
</script >
๐ Creates a rectangle with a smooth transition from red to yellow.
๐น7. Drawing an Image on Canvas
HTML
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas >
<img id="myImage" src="image.jpg" hidden>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const img = document.getElementById("myImage");
img.onload = function() {
ctx.drawImage(img, 10, 10, 280, 180);
};
</script >
๐ Draws an image inside the canvas.
This is commonly used in games and image processing.
๐น8. Simple Animation (Moving Ball)
HTML
<id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas >
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
let x = 30;
let dx = 2;
function draw() {
ctx.clearRect(0, 0, 300, 200);
ctx.beginPath();
ctx.arc(x, 100, 20, 0, Math.PI * 2);
ctx.fillStyle = "orange";
ctx.fill();
ctx.closePath();
x += dx;
if (x > 280 || x < 20) dx = -dx;
requestAnimationFrame(draw);
}
draw();
</script >
๐ Creates a simple animation of a ball moving left and right.
Summary
- canvasโ used for drawing graphics
- Does not work alone โ requires JavaScript
Common use cases:
- Games ๐ฎ
- Charts ๐
- Animations ๐๏ธ
- Visual effects ๐จ
- ๐ It is a powerful and flexible tool in modern web development.