var krog1 = {

            r: Math.floor((Math.random() * 25) + 15),

            x: Math.floor((Math.random() * 800) + 1),

            y: Math.floor((Math.random() * 800) + 1),

            power: 5,

            angle: -45,

            izris: function () {

                var canvas = document.getElementById("canvas");

                var ctx = canvas.getContext("2d");

                ctx.beginPath();

                ctx.arc(krog1.x, krog1.y, krog1.r, 0, 2 * Math.PI);

                ctx.fillStyle = "#133edc";

                ctx.fill();

                ctx.strokeStyle = "#133edc";

                ctx.stroke();

                ctx.closePath();

            }

        };

        var krog2 = {

            r: Math.floor((Math.random() * 25) + 15),

            x: Math.floor((Math.random() * 800) + 1),

            y: Math.floor((Math.random() * 800) + 1),

            power: 0,

            angle: 0,

            izris: function () {

                var canvas = document.getElementById("canvas");

                var ctx = canvas.getContext("2d");

                ctx.beginPath();

                ctx.arc(krog2.x, krog2.y, krog2.r, 0, 2 * Math.PI);

                ctx.fillStyle = "#c90c0c";

                ctx.fill();

                ctx.strokeStyle = "#c90c0c";

                ctx.stroke();

                ctx.closePath();

            }

        };

        var krog3 = {

            r: Math.floor((Math.random() * 25) + 15),

            x: Math.floor((Math.random() * 800) + 1),

            y: Math.floor((Math.random() * 800) + 1),

            power: 0,

            angle: 0,

            izris: function () {

                var canvas = document.getElementById("canvas");

                var ctx = canvas.getContext("2d");

                ctx.beginPath();

                ctx.arc(krog3.x, krog3.y, krog3.r, 0, 2 * Math.PI);

                ctx.fillStyle = "#95f34d";

                ctx.fill();

                ctx.strokeStyle = "#95f34d";

                ctx.stroke();

                ctx.closePath();

            }

        };

        function animate() {

            var canvas = document.getElementById("canvas");

            var reset = krog1.x;

            var requestID = window.requestAnimationFrame(animate);

            krog1.x += krog1.power;

            krog1.y += krog1.angle/3;

            console.log(krog1.x);

            if (krog1.x > canvas.width - 100)

                window.stopAnimationFrmae(requestID);

            izris();

        }

        function izris() {

            var canvas = document.getElementById("canvas");

            var ctx = canvas.getContext("2d");

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            krog1.izris(); //krog1 izris

            krog2.izris(); //krog2 izris

            krog3.izris(); //krog3 izris

        }

        function main() {

            izris();

            document.addEventListener('keydown', function (event) {

                if (event.keyCode == 68) {

                    console.log("68");

                    animate();

                }

                if (event.keyCode == 87) {

                    animate();

                }

                if (event.keyCode == 65) {

                    animate();

                }

                if (event.keyCode == 83) {

                    animate();

                }

            });

        }

        main();

​