JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://libcanvas.github.com/files/js/atom.js"></script>
<script src="http://libcanvas.github.com/files/js/libcanvas.js"></script>

JavaScript

LibCanvas.extract();

atom.declare( 'Graph', App.Element, {
    angle: 0,
    
    configure: function () {
        var mouse = this.layer.app.resources.get('mouse');
        
        this.events.add('mousemove', function () {
            this.angle = mouse.point.angleTo(this.shape.center);
            this.redraw();
        });
    },
    
    draw: function (ctx, color, angleFrom, angleTo) {
        ctx
        .beginPath(this.shape.center)
        .arc({
            circle: this.shape,
            angle : [angleFrom, angleTo]
        })
        .closePath()
        .fill(color);
    },
    
    renderTo: function (ctx) {
        this.draw( ctx, 'red' , 0, this.angle );
        this.draw( ctx, 'blue', this.angle, (360).degree() );
    }
});

var helper = new App.Light( new Size(120, 120) );

var graph = new Graph( helper.layer, { shape: new Circle(60,60,40)  });

helper.mouseHandler.subscribe(graph);