HTML TUTORIALS-
HTML Canvas Graphics Tag –
Introduction-
🔹All HTML <canvas>element is used to draw graphics via JavaScript, such as shapes, text, animations, and more. It provides a drawable region in your webpage that you control using JavaScript...
✅ 1. Basic
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>✅ 2. Accessing the Canvas with JavaScript:-
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D rendering context
</script>
✅ 3. Shapes:-👇
// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 50); // x, y, width, height
// Clear part of the canvas
ctx.clearRect(30, 30, 50, 25);
// Outline only
ctx.strokeStyle = "red";
ctx.strokeRect(10, 10, 150, 75);
✅ 4. Paths (Lines & Curves):-👇
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
✅ 5. Circle / Arc:-👇
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fillStyle = "green";
ctx.fill();
✅ 6. 🖋️ Text:-👇
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello Canvas!", 50, 100); // text, x, y
✅ 7. Draw a Line:-👇
<canvas id="lineCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
const c = document.getElementById("lineCanvas");
const ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
✅ 8. 🖼️ Images:-👇
const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "image.jpg";