وسم لوحة الرسم <canvas>

وسم canvas لوحة بكسلات ترسم عليها بالجافاسكريبت — الألعاب والرسوم البيانية والمعالجات المرئية الحية.

مستطيل فارغ تمامًا بلا جافاسكريبت — وكل شيء معها: تطلب منه «سياق الرسم» getContext('2d') ثم ترسم خطوطًا وأشكالًا ونصوصًا وصورًا بكسلًا بكسلًا، بمعدل 60 إطارًا بالثانية إن أردت. عليه تُبنى ألعاب المتصفح ومكتبات الرسوم البيانية (Chart.js) ومحررات الصور.

الفرق الجوهري عن SVG: canvas بكسلات «مرسومة ومنسية» (أسرع للآلاف المتحركة)، وSVG عناصر حية في DOM (أوضح تكبيرًا وأسهل تفاعلًا).

الصياغة

<canvas id="board" width="400" height="200"></canvas>
<script>
  const ctx = document.getElementById("board").getContext("2d");
  ctx.fillRect(10, 10, 100, 50);
</script>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<canvas id="c" width="300" height="120" style="border:1px solid #ddd; border-radius:8px"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.fillStyle = '#7c5cff';
  ctx.fillRect(20, 30, 120, 60);
  ctx.fillStyle = '#22d3ee';
  ctx.beginPath();
  ctx.arc(220, 60, 40, 0, Math.PI * 2);
  ctx.fill();
</script>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
width / height	أبعاد شبكة البكسلات — حدّدها هنا لا في CSS وإلا تشوه الرسم

💡 نصائح عملية

الأبعاد بالخصائص لا بـ CSS — التكبير بالـ CSS «يمطط» البكسلات ويشوهها
رسوم بيانية جاهزة؟ Chart.js فوقه توفر عليك آلاف الأسطر

⚠️ أخطاء شائعة

ضبط الحجم بـ CSS فقط فيتمدد الرسم مشوهًا
استخدامه لأيقونات ثابتة قابلة للتكبير — تلك مملكة SVG

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs