یک صفحه‌ی ساده با Canvas بسازید که یک توپ رنگی به‌صورت پیوسته روی صفحه به سمت پایین شتاب بگیرد، به لبه‌ها برخورد کند و بازتاب داشته باشد.

با استفاده از HTML5 Canvas و JavaScript یک حلقه‌ی انیمیشن با requestAnimationFrame ایجاد کنید؛ در هر فریم موقعیت توپ را بر اساس سرعت و شتاب (گرانش) به‌روز کنید، قبل از رسم صفحه را با clearRect پاک کنید و توپ را با arc بکشید، سپس برخورد با لبه‌ها را با بررسی مختصات و معکوس کردن مولفه‌ی سرعت انجام دهید (می‌توانید با یک ضریب میرایی اندکی انرژی را از بین ببرید). نکات مفید: از getContext('2d') برای رسم استفاده کنید، برای سرعت ثابت از timestamp یا delta time بهره ببرید و برای نمایش واضح روی نمایشگرهای با تراکم پیکسلی بالا devicePixelRatio را در نظر بگیرید.