الرسوميات: Canvas و SVG

مقدمة

يوفّر HTML طريقتين للرسم داخل الصفحة: Canvas وSVG. كلاهما يرسم أشكالًا ورسومات، لكن بأسلوب مختلف جوهريًا.

العنصر <canvas>

لوحة رسم نقطية (Bitmap) نرسم عليها بـ JavaScript. مثالية للألعاب والرسوم المتحركة والرسوم البيانية المعقّدة.

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

<script>
  const ctx = document.getElementById("myCanvas").getContext("2d");
  ctx.fillStyle = "#b026ff";
  ctx.fillRect(20, 20, 150, 80);   // مستطيل
  ctx.beginPath();
  ctx.arc(220, 60, 40, 0, Math.PI * 2);  // دائرة
  ctx.fill();
</script>

الـ canvas مجرّد "صورة" بعد الرسم — لا يحتفظ بالأشكال ككائنات، ويفقد جودته عند التكبير.

width وheight على <canvas> تحدّدان عدد البكسلات في لوحة الرسم نفسها. لو غيّرت الحجم بـ CSS فقط، تبقى اللوحة 300×150 بكسل (الافتراضي) ويمطّها المتصفح، فيظهر الرسم مشوّهًا وضبابيًا. حدّد الأبعاد بالسمتين دائمًا.

جرّب: غيّر الألوان والإحداثيات:

💡 للرسوم البيانية لا ترسم كل شيء يدويًا: مكتبات مثل Chart.js مبنية فوق <canvas> وتوفّر عليك مئات الأسطر.

العنصر <svg>

رسوميات متّجهة (Vector) تُكتب كوسوم XML. مثالية للأيقونات والشعارات والرسومات البسيطة.

<svg width="200" height="100">
  <rect x="10" y="10" width="100" height="60" fill="#00f5ff" />
  <circle cx="150" cy="40" r="30" fill="#b026ff" />
  <text x="20" y="90">SVG</text>
</svg>

مزايا SVG:

• لا يفقد الجودة عند التكبير (متّجه).
• كل شكل عنصر مستقل يمكن تنسيقه بـ CSS والتفاعل معه.
• نص SVG قابل للقراءة والفهرسة.

viewBox وcurrentColor

viewBox="0 0 100 100" يعرّف نظام إحداثيات داخلي للرسم، مستقلًّا عن حجمه على الشاشة. لذلك تكتب الأشكال مرة واحدة بإحداثيات الـ viewBox، ويتحجّم الرسم كاملًا مع أي width/height. وإذا حذفت width وheight وتركت viewBox فقط، يملأ الـ SVG عرض حاويته (متجاوب).

fill="currentColor" يجعل الشكل يأخذ لون النص المحيط (color في CSS)، فتتلوّن الأيقونة تلقائيًا مع الرابط أو الزر الذي هي بداخله.

Canvas مقابل SVG — متى تستخدم كلًّا؟

الأخطاء الشائعة

• ❌ نسيان width/height على <canvas>، أو ضبطهما بـ CSS فقط → لوحة 300×150 بكسل ممطوطة ورسم مشوّه.
• ❌ لصق SVG كما صدّرته برامج التصميم → فيه عادةً وسوم وبيانات زائدة كثيرة؛ نظّفه بأداة مثل SVGO قبل وضعه في الصفحة.
• ❌ رسم آلاف العناصر المتحرّكة بـ SVG → كل شكل عنصر في الـ DOM فيثقل الأداء؛ هنا Canvas أنسب.
• ❌ استخدام Canvas لأيقونة بسيطة → SVG أفضل وأخفّ وأوضح.
• ❌ توقّع تفاعل من Canvas كأنه عناصر — هو صورة واحدة.

خلاصة

<canvas> لوحة نقطية تُرسم بـ JavaScript (ألعاب/رسوم متحركة)، و<svg> رسوميات متّجهة لا تفقد جودتها (أيقونات/شعارات). اختر حسب الحاجة.