Heart

by cdeutsch

HTML

<canvas id="c1" width="400px" height="400px"></canvas>

CSS

#c1 {
    border: 2px dashed black;
}

JavaScript

CanvasRenderingContext2D.prototype.animatedLineTo = function(fromPos, toX, toY, duration, callback) {
    
    ctx.moveTo(fromPos.x, fromPos.y);
    
    // 30 frames per second.
    var ticks = Math.floor((duration / 1000) * 30);

    var incX = (toX - fromPos.x) / ticks;
    var incY = (toY - fromPos.y) / ticks;
        
    //console.log('incX' + incX);
    //console.log('incY' + incY);
    
    var nextX = fromPos.x + incX;
    var nextY = fromPos.y + incY;
    
    var timerId = null;
    
    function draw() {
        //console.log('x' + nextX);
        //console.log('y' + nextY);
        
        ctx.lineTo(nextX, nextY);
        ctx.stroke();
        nextX += incX;
        nextY += incY;
        ticks -= 1;
        
        if (ticks <= 0) {
            clearInterval(timerId);
            if (callback) {
                callback();
            }
        }
    }        
    
    timerId = setInterval(draw, 33.3);
    
    return {
        x: toX,
        y: toY
    };
}


CanvasRenderingContext2D.prototype.animatedArc = function(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise, duration, callback, scaleX, scaleY) {
    
    // 30 frames per second.
    var ticks = Math.floor((duration / 1000) * 30);

    var incAngle = null,
        nextAngle = null,
        timerId = null;

    if (antiClockwise) {
        incAngle = Math.abs(((startingAngle + ((2 * Math.PI) - endingAngle))) / ticks);
        nextAngle = startingAngle - incAngle;
    }
    else {
        incAngle = Math.abs((((2 * Math.PI) - startingAngle) + endingAngle) / ticks);
        nextAngle = startingAngle + incAngle;
    }

    function draw() {
        //console.log('x' + nextX);
        //console.log('y' + nextY);
        console.log(nextAngle);
        
        if (scaleX && scaleY) {
            ctx.save();
            // use scale to turn circle into oval.
            ctx.scale(scaleX, scaleY);
        }
        ctx.beginPath();        
        ctx.arc(centerX, centerY,...