oCanvas example

by Joe Critchley. note - you wont see the output in the frame (due to 'Unsafe JavaScript attempt to access frame'), you must use 'show'!

HTML

<script src="http://ocanvas.org/source/ocanvas-2.0.0.min.js"></script>
<canvas id="canvas" width ="500" height="500"></canvas>

JavaScript

/* Author: Joe Critchley
oCanvas Experiments
*/

var canvas = oCanvas.create({
    canvas: '#canvas',
    background: '#222',
    fps: 60
});

var circles = [], disabled = false;

var hover_circle = canvas.display.ellipse({
    x: 100,
    y: 100,
    radius_x: 100,
    radius_y: 100,
    stroke: '1px #666'
});

canvas.addChild(hover_circle);

canvas.bind('mousemove', function() {
    hover_circle.x = canvas.mouse.x;
    hover_circle.y = canvas.mouse.y;
});

hover_circle.bind('click', function() {
    
    if(disabled) {
        return;
    }

    disabled = true;
    var new_circle = this.clone({
        fill: '#999'
    });
    canvas.addChild(new_circle);
    circles.push(new_circle);
    
    new_circle.animate({
        radius_x: 50,
        radius_y: 50
    }, '600', 'ease-in-out', function() {
        disabled = false;
    });
    
});

canvas.setLoop(function() {
    // ?? why did I need a set-loop to get the mousemove event working?    
});

canvas.timeline.start();