Canvas Animation WIP

HTML

<canvas id="canvas" width="300" height="300"></canvas>
<span id="log"></span>

JavaScript

canvasHolder = document.getElementById( 'canvas' );
context = canvasHolder.getContext('2d');

context.fillStyle = 'white';
var w = canvasHolder.width, h = canvasHolder.height;
context.fillRect( 0, 0, w, h);
context.scale(2, 2);

//set the direction the line draws in
//1->ltr | -1->rtl
var dir = -1;
//IMPORTANT: this must be set to greater than the length of the line
var length = 350;
//the speed of the line draw
var speed = 2;

var progress = 0;
var animFunc = updateLine;

var full = 1;
var amount = 0;
var amountToIncrease = 5;

context.globalCompositeOperation='copy';

function updateLine() {
    //define the line
    defineLine(5);

  if(progress<length) {

      progress+=speed;
      moveDash(progress, dir);
      /**/
      document.getElementById("log").innerHTML = progress;
      /**/
  } else {
      progress = 0;
      context.clearRect(0, 0, 300, 300);
      animFunc = fillHeart;
  }  
}

function fillHeart() {
  
  amount += amountToIncrease;
  /**/
  document.getElementById("log").innerHTML = amount;
  /**/
  if ((amount/100) < full) {
  
      defineLine(15);
      
  } else {

      amount = 0; // restart
      context.clearRect(0, 0, 300, 300);
      animFunc = updateLine;
  }
}

function defineLine(b) {
    context.beginPath();
    
    if (b < 10) {
    	context.moveTo(75,40);
    }
    
    context.bezierCurveTo(75,37,70,25,50,25);
    context.bezierCurveTo(15,25,20,62.5,20,62.5);
    context.bezierCurveTo(20,80,40,102,75,120);
    context.bezierCurveTo(110,102,130,80,130,62.5);
    context.bezierCurveTo(130,62.5,135,25,100,25);
    context.bezierCurveTo(85,25,75,37,75,40);
    context.lineWidth = 3;
    context.lineCap = "round";
    context.strokeStyle = 'red';
    
    if (b > 10) {
      context.fillStyle = 'rgba(255, 0, 0, '+(amount/100)+')';
			context.fill();
    }
}

function moveDash(frac, dir) {
    //default direction right->left
    var dir = dir || -1 
    context.setLineDash([length]);
    context.lineDashOffset =...