<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas_element;
var initial_x = 200;
var initial_y = 300;
var x_movement = 1;
function start_canvas()
{setInterval(draw_circle, 10);
canvas_element = bouncing_ball_canvas.getContext('2d');
}
function draw_circle()
{
canvas_element.clearRect(0,0, 1000, 500);
canvas_element.beginPath();
canvas_element.fillStyle="#FF0000";
canvas_element.arc(initial_x, initial_y, 50, 0+initial_x/50, Math.PI*2+initial_x/50, true);
canvas_element.lineTo(initial_x, initial_y);
canvas_element.stroke();
if( initial_x<0 || initial_x>1000) x_movement = -x_movement;
initial_x += x_movement;
}
</script>
</head>
<body>
<canvas id="bouncing_ball_canvas" width="1000" height="500">
</canvas>
<body onLoad="start_canvas();">
</body>
</html>
Here we have a program that creates a moving ball using HTML and JavaScript. The ball moves in a jerky motion due to its blinking effect. Do you know how we can fix this issue?