الرسم على Canvas

// الحصول على عنصر Canvas وسياق الرسم
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

// تعيين لون التعبئة
ctx.fillStyle = '#4f46e5';

// رسم مستطيل
// fillRect(x, y, width, height)
ctx.fillRect(50, 50, 200, 100);

// تعيين لون الحدود
ctx.strokeStyle = '#1e40af';
ctx.lineWidth = 3;

// رسم حدود المستطيل
ctx.strokeRect(50, 50, 200, 100);

// متغيرات الكرة
let x = 50;
let dx = 2; // السرعة الأفقية

function drawBall() {
    const canvas = document.getElementById('animationCanvas');
    const ctx = canvas.getContext('2d');
    
    // مسح Canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // رسم الكرة
    ctx.beginPath();
    ctx.arc(x, 100, 20, 0, Math.PI * 2);
    ctx.fillStyle = '#4f46e5';
    ctx.fill();
    ctx.closePath();
    
    // تحديث موضع الكرة
    x += dx;
    
    // ارتداد عند الحواف
    if (x + 20 > canvas.width || x - 20 < 0) {
        dx = -dx;
    }
    
    // طلب الإطار التالي من الرسوم المتحركة
    animationId = requestAnimationFrame(drawBall);
}

// بدء الرسوم المتحركة
let animationId = requestAnimationFrame(drawBall);

// إيقاف الرسوم المتحركة
function stopAnimation() {
    cancelAnimationFrame(animationId);
}