Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Antraste</title>
        <style>
            body {
                margin: 0px;
            }
        </style>
    </head>
    <body>
        <canvas id="cvs" width="500" height="500"></canvas>
        <script>
            var d = document;
            var c = d.getElementById("cvs");
            var ctx = c.getContext("2d");
            var i = 0;

            var Ball = function(x,y, r, sx,sy, color){
                this.x = x;
                this.y = y;
                this.r = r;
                this.sx = sx;
                this.sy = sy;
                this.color = color;

                this.draw = function(){
                    ctx.save();
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
                    ctx.fill();
                    ctx.restore();
                }
            }

            var bumbulis = new Ball(50, 50, 20, 2, 5, "blue");

            function frame(){ // Kadras
                calc();
                render();
                requestAnimationFrame(frame);
            }

            function calc(){ // Skaiciavimas

            }

            function render(){ // Piesimas ekrane
                ctx.clearRect(0,0,c.width,c.height);
                bumbulis.draw();
            }

            frame();
        </script>
    </body>
</html>