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

برای حل این مسئله از HTML canvas و JavaScript استفاده کنید: در هر فریم با requestAnimationFrame صفحه را با clearRect پاک کنید، توپ را با arc بکشید و موقعیت آن را با سرعت فعلی به‌روزرسانی کنید؛ هنگام برخورد با لبه‌های canvas سرعت افقی را منفی کنید تا جهت حرکت برگردد. از متغیرهای x، vx و radius برای مدیریت موقعیت، سرعت و برخورد استفاده کنید و برای حرکت روان از timestamp یا محاسبه delta time بین فریم‌ها استفاده کنید؛ می‌توانید دکمه‌های شروع/توقف یا یک اسلایدر برای تنظیم سرعت اضافه کنید.