HTML Canvas API का उपयोग web pages पर graphics, shapes, images, animations और games draw करने के लिए किया जाता है। Canvas एक powerful drawing surface provide करता है जहाँ JavaScript के माध्यम से dynamic visual content create किया जा सकता है।
Canvas API pixel-based होती है, यानी once draw होने के बाद elements DOM का हिस्सा नहीं रहते। इसलिए यह high-performance graphics और animations के लिए suitable है।
HTML Canvas क्या है?
HTML Canvas एक <canvas> element है जो web page पर rectangular drawing area create करता है। Canvas खुद कुछ draw नहीं करता, बल्कि JavaScript के जरिए drawing instructions receive करता है।
Basic Canvas Syntax
<canvas id="myCanvas" width="500" height="300"></canvas>
Canvas Context
Canvas पर drawing करने के लिए rendering context की जरूरत होती है। सबसे common context है 2D context।
Get 2D Context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx object के through सभी drawing methods access किए जाते हैं।
Drawing Shapes
Rectangle Draw करना
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 100);
Rectangle Stroke करना
ctx.strokeStyle = 'red';
ctx.strokeRect(50, 50, 150, 100);
Clear Rectangle
ctx.clearRect(60, 60, 50, 50);
Drawing Lines
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
Drawing Circles
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.fill();
Colors और Styles
fillStylestrokeStylelineWidth
ctx.strokeStyle = 'green';
ctx.lineWidth = 5;
Drawing Text
Fill Text
ctx.font = '20px Arial';
ctx.fillText('Hello Canvas', 50, 50);
Stroke Text
ctx.strokeText('Canvas API', 50, 100);
Images Draw करना
const img = new Image();
img.src = 'image.jpg';
img.onload = function () {
ctx.drawImage(img, 10, 10, 200, 150);
};
Canvas Transformations
Translate
ctx.translate(50, 50);
Rotate
ctx.rotate(Math.PI / 4);
Scale
ctx.scale(1.5, 1.5);
Canvas Animation
Canvas animations requestAnimationFrame() के साथ बनाई जाती हैं।
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
x += 2;
requestAnimationFrame(animate);
}
animate();
Canvas State Management
save()restore()
ctx.save();
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
ctx.restore();
Canvas Limitations
- Drawn elements DOM का हिस्सा नहीं होते
- Individual element manipulation possible नहीं
- Accessibility support limited
Browser Support
HTML Canvas API सभी modern browsers में supported है।
Common Use Cases
- Games development
- Charts और graphs
- Image editing tools
- Data visualization
- Animations
Best Practices
- Canvas size HTML attribute से set करें
- Frequent redraw से पहले
clearRect()use करें - Large animations के लिए performance optimize करें
Conclusion
HTML Canvas API web पर high-performance graphics और animations create करने के लिए एक powerful tool है। JavaScript के साथ इसका सही उपयोग modern interactive web applications बनाने में मदद करता है।