العنصر <canvas> مساحة فارغة للرسم بواسطة JavaScript: أشكال، ورسوم متحركة، وألعاب، ورسوم بيانية.

<canvas id="board" width="300" height="150"></canvas>

const ctx = document.getElementById('board').getContext('2d');
ctx.fillStyle = 'teal';
ctx.fillRect(20, 20, 120, 80);   // x, y, width, height

canvas أم SVG؟

• canvas: رسم بالبكسل، سريع مع آلاف العناصر، مناسب للألعاب والتأثيرات.
• SVG: أشكال يمكن تكبيرها دون تشويش، وكل شكل عنصر يمكن تنسيقه، مناسب للأيقونات والرسوم البسيطة.

لعرض صورة عادية استخدم <img>، وللفيديو <video>.