the trace of the movement of the figures on the screen, with which it is connected, why it is

http://jsfiddle.net/JsJx7/1/

code by reference:

`function anim(canvas, fps, clear) { var context = canvas.getContext("2d"); var interval = null; var update = null; var draw = null; this.update = function(func) { update = func; }; this.draw = function(func) { draw = func; }; var step = function() { if (clear) { context.clearRect(0, 0, canvas.width, canvas.height); } if (update !== null) { update(); } if (draw !== null) { draw(); } }; this.stop = function() { clearInterval(interval); }; this.play = function() { if (draw !== null) { draw(); } interval = setInterval(step, 1000 / fps); }; } function circle(x, y, r) { this.x = x; this.y = y; this.r = r; this.draw = function(context, color, globalAlpha) { context.globalAlpha = globalAlpha; // "прозрачность" context.fillStyle = color; // цвет заливки context.beginPath(); context.arc(this.x, this.y, this.r, 0, Math.PI * 2, true); context.fill(); }; } function rect(x, y, width, height) { this.x = x; this.y = y; this.width = width; // ширина this.height = height; // высота this.draw = function(context, color, globalAlpha) { context.globalAlpha = globalAlpha; // "прозрачность" context.fillStyle = color; // цвет заливки context.fillRect(this.x, this.y, this.width, this.height); }; } function init() { var screen = new rect(0, 0, 320, 320); var ball1 = new circle(178, 25, 25); var ball3 = new circle(25, 150, 25); var vX1 = 5; var vY1 = 5; var vX3 = 5; var vY3 = 5; var canvas = document.getElementById("example"); canvas.width = screen.width; canvas.height = screen.height; var context = canvas.getContext("2d"); var game = new anim(canvas, 30, false); game.draw(function() { screen.draw(context, "#000", 0.5); ball1.draw(context, "#f00", 1); ball3.draw(context, "#fff", 1); }); game.update(function() { if (ball1.y - ball1.r < 0 || ball1.y + ball1.r > 320) // соприкосновение с "полом" и "потолком" холста { vY1 = -vY1; } if (ball1.x - ball1.r < 0 || ball1.x + ball1.r > 320) // соприкосновение с левой и правой "стенкой" холста { vX1 = -vX1; } if (ball3.y - ball3.r < 0 || ball3.y + ball3.r > 320) // соприкосновение с "полом" и "потолком" холста { vY3 = -vY3; } if (ball3.x - ball3.r < 0 || ball3.x + ball3.r > 320) // соприкосновение с левой и правой "стенкой" холста { vX3 = -vX3; } // условие соприкосновения шаров друг с другом if ( Math.abs(ball1.x - ball3.x) + Math.abs(ball1.y - ball3.y) <= 50) { vX1 = -vX1; vX3 = -vX3; vY1 = -vY1; vY3 = -vY3; } ball1.x += vX1; ball1.y += vY1; ball3.x += vX3; ball3.y += vY3; }); screen.draw(context, "#000", 1); ball1.draw(context, "#f00", 1); ball3.draw(context, "#fff", 1); var click = false; // по шелчку мыши останавливаем обновление холста, // если холст остановлен продолжаем анимацию canvas.onclick = function() { if (!click) { click = true; game.play(); } else { click = false; game.stop(); } }; } init();` 

If you click on the picture, the balls will begin to move and leave a trail. I did not delve into the code, the javascript syntax is not familiar. Running a similar, written in java on the Android OS, there is no such trace. In some cases, it is needed for elegance, and somewhere else on the contrary superfluous. So what is the reason for his appearance? What are the features of javascript? or monitor? In java, the system is as follows: the game scene was filled with a background pattern, drew objects, changed the coordinates of the objects, filled the background and drew again. And how is it? Maybe there is a code in the javascript library that intentionally creates this trace?