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>