Canvas学習(1)　マウス追従

HTML

<div style="margin:0 auto; text-align:center;">
    <canvas id="canvas" width="480" height="480" style="margin:0 auto;"></canvas>
</div>

JavaScript

var Class = function(){return function(){this.initialize.apply(this,arguments)}}
var Stage = Class();
Stage.prototype = {
    initialize: function(canvasId, bgColor, rate) {
        this.rate = Math.round( 1000 / rate );
        this.canvas = document.getElementById( canvasId );
        this.context = this.canvas.getContext("2d");
        this.bgColor = bgColor;
        this.rect = this.canvas.getBoundingClientRect();
        this.mouseX = 0;
        this.mouseY = 0;
        this.children = [];
        var self = this;
        this.canvas.onmousemove = function(e) {
            self.mouseX = e.clientX - self.rect.left;
            self.mouseY = e.clientY - self.rect.top;
        };
    },
    refresh:function(){
        this.context.fillStyle = this.bgColor;
        this.context.fillRect(0, 0, this.canvas.width , this.canvas.height );
    },
    addChild:function(obj){
        this.refresh();
        this.children.push( obj );
        obj.stage = this;
        obj.draw();
    },
    update:function(){
        this.refresh();
        for( var i = 0; i < this.children.length; i++ ) {
            this.children[i].draw();
        }
    },
    rendering:function(func){
        var self = this;
        setInterval( function(){
            func();
            self.update();
        }, this.rate );
    }
};

var Circle = Class();
Circle.prototype = {
    initialize: function( radius, color ) {
        this.radius = radius;
        this.color = color;
        this.stage = null;
        this.x = 0;
        this.y = 0;
    },
    draw: function(){
        if( this.stage == null ) return;
        
        var context = this.stage.context;
        context.fillStyle = this.color;
        context.beginPath();
        context.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
        context.closePath();
        context.fill();
    }
};

window.addEventListener("load", function(){
    var stage = new Stage("canvas", "white", 1000);
    var circle = new Circle(5 , "#ff0000");
...