الرسوميات: 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 مجرّد "صورة" بعد الرسم — لا يحتفظ بالأشكال ككائنات، ويفقد جودته عند التكبير.

العنصر <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 قابل للقراءة والفهرسة.

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

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

• ❌ نسيان width/height على <canvas> → حجم افتراضي خاطئ.
• ❌ استخدام Canvas لأيقونة بسيطة → SVG أفضل وأخفّ وأوضح.
• ❌ توقّع تفاعل من Canvas كأنه عناصر — هو صورة واحدة.

خلاصة

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