Canvas Animation WIP

by Jherson Mendoza

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 = 1;

var progress = 0;
var lineInterval;

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

context.globalCompositeOperation='copy';
drawLine();

function drawLine() {
    //this clears itself once the line is drawn
    lineInterval = setInterval(updateLine, 1);
}

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

  if(progress<length) {

      progress+=speed;
      moveDash(progress, dir);
      /**/
      document.getElementById("log").innerHTML = progress;
      /**/
  } else {

      clearInterval(lineInterval);
      progress = 0;
      context.clearRect(0, 0, 300, 300);
      fillInterval = setInterval(fillHeart, 100);
  }  
}

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

			clearInterval(fillInterval);
      amount = 0; // restart
      context.clearRect(0, 0, 300, 300);
      lineInterval = setInterval(updateLine, 1);
  }
}

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.clip(); 
     ...