Problem Statement
What is the main purpose of the <canvas> element in HTML5?
Explanation
The canvas element provides a drawable region defined in HTML code with height and width attributes. You can use JavaScript to draw shapes, images, and animations on it. Canvas is widely used for 2D games, charts, image processing, and custom visualizations. It is a bitmap-based graphics element, unlike SVG which uses vector graphics.
Code Solution
SolutionRead Only
<!-- Basic Canvas Example -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
const c = document.getElementById('myCanvas');
const ctx = c.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 150, 50);
ctx.fillStyle = 'white';
ctx.font = '16px Arial';
ctx.fillText('Canvas Demo', 40, 50);
</script>