15. Canvas API (High-Performance 2D/3D Rendering)

1. HTML Container vs Rendering Context

Basic: HTML mein sirf ek khali box likha jata hai: <canvas id="board"></canvas>. Isko canvas board samajhiye.

Pro: Is Canvas ke andar koi HTML element exist nahi karta (No DOM nodes). Asli execution JavaScript engine karta hai. Context fetch karna pehla step hota hai: let ctx = canvas.getContext('2d');. WebGL games ke liye (like Three.js libraries) getContext('webgl') use kiya jata hai jo direct GPU shaders pipeline se baat karta hai.

2. Immediate Mode Rendering & State Machines

Pro: SVG Retained Mode hota hai (HTML element memory mein yaad rakhta hai ki circle hai). Par Canvas Immediate Mode graphics use karta hai. Canvas par paint brush commands throw ki jati hain (ctx.fillRect(), ctx.arc()) aur jaise hi command chalti hai, display memory mein pixels render ho jate hain aur browser bhool jata hai ki 'Circle' naam ki koi cheez bhi thi. Is approach mein memory consumption Extremely Low rehti hai.

3. Core Capabilities

• Pixel Manipulation: getImageData() API photo filter apps ka base hai. Isse aap har ek individual pixel ke RGBA values array mein utha sakte hain, mathematical operations (jaise grayscale conversion ya blur) karke wapas paint kar sakte hain.
• Compositing: Photoshop jaisi blending modes (multiply, overlay) draw objects ke overlapping logic par natively available hain.

4. Game Loops & RequestAnimationFrame

Pro: Canvas mein animation ka concept screen ko lagataar clear karke new frame paint karna hota hai (Flipbook style). window.requestAnimationFrame() browser ke screen refresh rate (usually 60Hz/144Hz) ke mutabiq optimally code tick karta hai, jisse silky smooth 60 Frames-Per-Second browser games develop kiye jate hain.