الرسم على Canvas

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

const canvas = document.querySelector("#board");
const ctx = canvas.getContext("2d"); // سياق الرسم ثنائي الأبعاد

// مستطيل معبّأ
ctx.fillStyle = "purple";
ctx.fillRect(10, 10, 100, 60); // x, y, width, height

// مستطيل بحدود فقط
ctx.strokeStyle = "cyan";
ctx.lineWidth = 3;
ctx.strokeRect(130, 10, 100, 60);

// مسح جزء من اللوحة
ctx.clearRect(20, 20, 30, 20);

ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle
ctx.fillStyle = "orange";
ctx.fill();

// مسار حر بخطوط
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(150, 250);
ctx.lineTo(250, 200);
ctx.strokeStyle = "black";
ctx.stroke();

ctx.font = "24px Arial";
ctx.fillStyle = "black";
ctx.fillText("مرحبًا Canvas", 50, 280);

const img = new Image();
img.src = "/logo.png";
img.onload = () => {
  ctx.drawImage(img, 300, 10, 80, 80); // ارسم بعد اكتمال التحميل فقط
};

let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // امسح الإطار السابق
  ctx.fillStyle = "purple";
  ctx.fillRect(x, 100, 40, 40);

  x += 2;
  if (x > canvas.width) x = -40; // أعد الكرة من اليسار

  requestAnimationFrame(animate); // اطلب الإطار التالي
}

requestAnimationFrame(animate); // ابدأ الحلقة

canvas.addEventListener("click", (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left; // إحداثيات نسبية للوحة نفسها
  const y = event.clientY - rect.top;

  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fillStyle = "cyan";
  ctx.fill();
});