Ball Canvas

by unsign3d

HTML

<canvas id="canvas" widht="300px" height="300px"></canvas>

JavaScript

var ball, ctx;

function Ball(x, y, color)
{
    this.x = x;
    this.y = y;
    this.color = color;
    
    var radius = 20;
    var speed = 2;
    
    this.Draw = function(ctx) {
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 5;
        
        ctx.beginPath();
        ctx.arc(this.x, this.y, radius, 0, 2*Math.PI);
        ctx.stroke();   

    };
    
}

function Update(e)
{
    ctx.clearRect(0, 0, 300, 300);
    ball.Draw(ctx);
}

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

ball = new Ball(50, 50, "#000000");

document.body.onmousemove = function(e) {
    ball.x = e.pageX;
    ball.y = e.pageY;
};

setInterval(Update, 1000/30);