HTML Canvas
What is Canvas?
The <canvas> element is used to draw graphics on a web page using JavaScript. It is used for games, charts, animations, and graphics rendering.
Basic Syntax
<canvas id="myCanvas" width="300" height="200"></canvas>
Example
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 150, 100);
</script>
Common Canvas Methods
- getContext("2d")
- fillRect()
- strokeRect()
- beginPath()
- arc()
- stroke()
Where Canvas is Used?
- Game development
- Charts & graphs
- Image processing
- Animations
Important Tip
Canvas is just a blank area. Everything is drawn using JavaScript code.