[destus]

jtag,
простейший пример.

<script>
            function Ball(x, y, dx, radius) {
                 this.x = x;
                 this.y = y;
                 this.dx = dx;
                 this.radius = radius;
             }
             document.addEventListener('DOMContentLoaded', function (e) {
                 var canvas = document.querySelector('canvas'), context = canvas.getContext('2d');
                 var ball = new Ball(50, 50, 1, 20);
                 setTimeout(drawFrame, 20);

                 function drawFrame() {
                     context.clearRect(0, 0, canvas.width, canvas.height);
                     context.beginPath();
                     ball.x += ball.dx;
                     ball.dx = ball.dx * 1;
                     ((ball.x + ball.radius > canvas.width) || (ball.x - ball.radius < 0)) && (ball.dx = -ball.dx);
                     context.fillStyle = "red";
                     context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
                     context.lineWidth = 1;
                     context.fill();
                     context.stroke();
                     setTimeout(drawFrame, 20);
                 }

             })
    </script>
    <canvas width="100" height="100" style="border : 1px solid black"></canvas>