почему зеда петя?

HTML

<canvas id='canvas' width="800px" height="300px" onclick="start()"></canvas>
<div style="text-align: center; width:800px;">
<input type="button" onclick="start()" value="почему zeda − петя?">
</div>

JavaScript

var G_SCALE = 20;

var G_MORPH_STEPS = 30;

var curStep = 0;
var mainLoop = 0;

var Morph = function(type, from, to) {
	this.t = type;
  this.curX = this.fromX = from.x || 0;
  this.curY = this.fromY = from.y || 0;
  this.fromData = from.data;
  
  this.toX = to.x || this.fromX;
  this.toY = to.y || this.fromY;
  this.toData = to.data;
  
  this.diffData = [];
  this.curData = [];
  
  this.diffX = (this.toX-this.fromX)/G_MORPH_STEPS;
  this.diffY = (this.toY-this.fromY)/G_MORPH_STEPS;

  for (i=0; i<this.fromData.length; i++)
  {
    this.diffData[i] = (this.toData[i]-this.fromData[i])/G_MORPH_STEPS;
    this.curData[i] = this.fromData[i];
  }
  
	this.update = function (curStep) {
  	this.curX = this.fromX + this.diffX*curStep;
  	this.curY = this.fromY + this.diffY*curStep;
    
    for (i=0; i<this.fromData.length; i++)
    {
    	this.curData[i] = this.fromData[i] + this.diffData[i]*curStep;
    }
  }
  
  this.draw = function (ctx) {
  	ctx.beginPath();
  	ctx.moveTo(this.curX + this.curData[0]*G_SCALE, this.curY + this.curData[1]*G_SCALE);
    for (i=2; i<this.curData.length; i+=2)
    {
    	ctx.lineTo(this.curX + this.curData[i]*G_SCALE, this.curY + this.curData[i+1]*G_SCALE);
    }
    ctx.stroke();
  }

}


ctx = document.getElementById('canvas').getContext('2d');
  
ctx.fillStyle="#000000";
ctx.strokeStyle="#fff800";
ctx.lineWidth=10;
ctx.lineJoin='round';
ctx.fillRect(0, 0, 800, 300);

var morphs = [];
//z
morphs.push(new Morph('z', {x:100, y:100, data:[0,0, 6,0, 0,6, 6,6]}, {data:[0,6, 0,0, 6,0, 6,6]}));
//e
morphs.push(new Morph('z', {x:240, y:100, data:[6,0, 0,0, 0,6, 6,6]}, {data:[6,6, 0,6, 0,0, 6,0]}));
morphs.push(new Morph('z', {x:240, y:100, data:[0,3, 4,3]}, {data:[0,3, 4,3]}));
//d
morphs.push(new Morph('z', {x:380, y:100, data:[0,0, 2,0, 6,6, 0,6, 0,0]}, {data:[0,0, 3,0, 3,6, 3,0, 6,0]}));
//a
morphs.push(new Morph('z', {x:520, y:100, data:[0,6, 0,3, 3,0, 6,3, 6,6]}, {data:[0,6, 6,4, 0,2, 6,0, 6,6]}));
morphs.push(new Morph('z', {x:520,...