"i love you so much" interactive comic

.js

var canvas;
var canvas2;
var canvas3;
var canvas4;
var canvas5;
var canvas6;
var canvas7;


var a; 
var b;
var c;
var d; 
var e;
var f;
var g;

var name  = "swinging";//a
var name2 = "bearpop";//b
var name3 = "operating";//c
var name4 = "sewing";//d 
var name5 = "alive";//e
var name6 = "deadbear";//f
var name7 = "closeup";//g

var totalframes  = 52;
var totalframes2 = 54;
var totalframes3 = 173;
var totalframes4 = 143;
var totalframes5 = 51;
var totalframes6 = 38;
var totalframes7 = 38;

var state = 0;
//var state = 1;

//var distance;

var ctx1;
var ctx2;
var ctx3;
var ctx4;
var ctx5;
var ctx6;
var ctx7;

var col1;
var col2;
var col3;


function setup() {
	
  a = new Animation(totalframes, .7, 255);
  b = new Animation(totalframes2, .7,255);
  c = new Animation(totalframes3, .7,255);
  d = new Animation(totalframes4, .5,255);
  e = new Animation(totalframes5, .5,255);
  f = new Animation(totalframes6, .5,255);
  g = new Animation(totalframes7, .5,255);
	
  a.preload(name);
  b.preload(name2);
  c.preload(name3);
  d.preload(name4);
  e.preload(name5);
  f.preload(name6);
  g.preload(name7);

///////////////////////////////////////////////// 
	canvas = createCanvas(400, 400);
	canvas.position(0, 0);
	//canvas.id("one");
	
	canvas2 = createCanvas(370, 330);
	canvas2.position(400, 5);
	
	canvas3 = createCanvas(420, 330);
	canvas3.position(870, 10);
	
	canvas4 = createCanvas(360, 360);
	canvas4.position(10, 330);
	//canvas.id("one");
	
	canvas5 = createCanvas(370, 370);
	canvas5.position(370, 300);
	
	canvas6 = createCanvas(400, 400);
	canvas6.position(720, 310);
	
	canvas7 = createCanvas(200, 200);
	canvas7.position(1110, 400);


//////////////////////////////////////////////
	
	ctx1=canvas.elt.getContext("2d");
	ctx2=canvas2.elt.getContext("2d");
	ctx3=canvas3.elt.getContext("2d");
	ctx4=canvas4.elt.getContext("2d");
	ctx5=canvas5.elt.getContext("2d");
	ctx6=canvas6.elt.getContext("2d");
	ctx7=canvas7.elt.getContext("2d");
	
	//ctx1.globalAlpha=1;
	
///////////////////////////////////////////////
   // canvas.mouseOver(Highlight)
	canvas.mouseOver(drawing);
	canvas.mouseOver(Highlighton2);
	canvas.mouseOut(animefalse);
	canvas.mouseOut(Highlightoff2);
	
	canvas2.mouseOver(drawing2);
	canvas2.mouseOver(Highlighton3);
	canvas2.mouseOut(animefalse1);
	canvas2.mouseOut(Highlightoff3);


	canvas3.mouseOver(drawing3);
	canvas3.mouseOver(Highlighton4);
	canvas3.mouseOut(animefalse2);
	canvas3.mouseOut(Highlightoff4);
	
	canvas4.mouseOver(drawing4);
	canvas4.mouseOver(Highlighton5);
	canvas4.mouseOut(animefalse3);
	canvas4.mouseOut(Highlightoff5);
	
	canvas5.mouseOver(drawing5);
	canvas5.mouseOver(Highlighton6);
	canvas5.mouseOut(animefalse4);
	canvas5.mouseOut(Highlightoff6);
	
	canvas6.mouseOver(drawing6);
	canvas6.mouseOver(Highlighton7);
	canvas6.mouseOut(animefalse5);
	canvas6.mouseOut(Highlightoff7);
	
	canvas7.mouseOver(drawing7);
	canvas7.mouseOver(Highlighton1);
	canvas7.mouseOut(animefalse6);
	canvas7.mouseOut(Highlightoff1);

	
} 

function draw(){
	
	///////////////////////////////////////////////////////////////////////

	context(canvas);
	
	clear();
	//noStroke();
	a.display(40, 25, 375, 347);
	a.next();
	a.high(0, 0, 10, 10);

	context(canvas2);//b
	clear();
	//noStroke();
	b.display(80, 5, 310, 290);
	b.next();
	b.high(0, 0, 10, 10);
	
	context(canvas3);//c
	clear();
	//background(0, 45, 100);
	//noStroke();
	c.display(30, 3, 360, 340);
	c.next();
	c.high(0, 0, 10, 10);
	
	context(canvas4);//d
	//background(255, 45, 67);
	clear();
	//noStroke();
	d.display(10, 15, 375, 347);
	d.next();
	d.high(0, 0, 10, 10);


	context(canvas5);//e
	clear();
	//background(255, 100, 67);
	//noStroke();
	e.display(40, 5, 370, 350);
	e.next();
	e.high(40, 40, 10, 10);

	
	context(canvas6);//f
	clear();
	//background(100, 100, 67);
	//noStroke();
	f.display(30, 20, 400, 380);
	f.next();
	f.high(80, 100, 10, 10);
	
	
	context(canvas7);//g
	//background(255, 100, 100);
	clear();
	//noStroke();
	g.display(0, 5, 215, 190);
	g.next();
	g.high(40, 40, 10, 10);



	
		
}

function animefalse() {
	//drawing() == false;
	a.playing = false;
		
}

function animefalse1() {	
	//drawing2() == false;
	b.playing = false;
}


function animefalse2() {	
	//drawing2() == false;
	c.playing = false;
}

function animefalse3() {
	//drawing() == false;
	d.playing = false;
		
}

function animefalse4() {	
	//drawing2() == false;
	e.playing = false;
}


function animefalse5() {	
	//drawing2() == false;
	f.playing = false;
}


function animefalse6() {	
	//drawing2() == false;
	g.playing = false;
}


function drawing(){ //how it draws 
    
  	a.playing = true;
  	//a.playing = !a.playing; //false then go back to the first drawing 
  	a.imageIndex = 1; //go to the first image 
  	//b.high(0, 0, 200, 200);
  	ctx1.globalAlpha=1;
  	state = 0;
  	
  	
}

function drawing2(){ //how it draws 
  	b.playing = true;
  	//b.playing = !b.playing; //false then go back to the first drawing 
  	b.imageIndex = 1; //go to the first image 
  	state = 1;
  	ctx2.globalAlpha=1;
		

}

function drawing3(){ //how it draws 
  c.playing = true; //false then go back to the first drawing 
  c.imageIndex = 1; //go to the first image 
  state = 2;
  
		ctx3.globalAlpha=1;

}
function drawing4(){ //how it draws 
    
  	d.playing = true;
  	//a.playing = !a.playing; //false then go back to the first drawing 
  	d.imageIndex = 1; //go to the first image 
  	//d.high(0, 0, 200, 200);
  	ctx4.globalAlpha=1;
  	//state = 0;
  	
  	
}

function drawing5(){ //how it draws 
  	e.playing = true;
  	//b.playing = !b.playing; //false then go back to the first drawing 
  	e.imageIndex = 1; //go to the first image 
  	//state = 1;
  	ctx5.globalAlpha=1;
		

}

function drawing6(){ //how it draws 
  f.playing = true; //false then go back to the first drawing 
  f.imageIndex = 1; //go to the first image 
  //state = 2;
  
		ctx6.globalAlpha=1;

}

function drawing7(){ //how it draws 
  g.playing = true; //false then go back to the first drawing 
  g.imageIndex = 1; //go to the first image 
  //state = 2;
  
		ctx7.globalAlpha=1;

}

function Highlighton1 () {

a.col = 0;	
	
}
function  Highlightoff1(){
a.col = 255;	
}

function Highlighton2 () {

b.col = 0;	
	
}
function  Highlightoff2(){
b.col = 255;	
}
function Highlighton3() {

c.col = 0;	
	
}
function  Highlightoff3(){
c.col = 255;	
}

function Highlighton4() {

d.col = 0;	
	
}
function  Highlightoff4(){
d.col = 255;	
}

function Highlighton5() {

e.col = 0;	
	
}
function  Highlightoff5(){
e.col = 255;	
}

function Highlighton6() {

f.col = 0;	
	
}
function  Highlightoff6(){
f.col = 255;	
}
function Highlighton7() {

g.col = 0;	
	
}
function  Highlightoff7(){
g.col = 255;	
}




///////////////////////////////////////////////////////////////////////////////

function Animation(_framex, _speed, _C){ //description 
  var framex = _framex;
  this.maxImages = framex;
  this.speed = _speed;//going through the array at this speed 
  this.imageIndex = 1;
  this.bear=[];
  this.playing = false;
  this.col = _C;
  //this.hide;
  //this.show;
  
}

///////////////////PROTOTYPE

Animation.prototype.preload = function(test) { //load this array of images

var test1 = test;


  for (var i = 0; i < this.maxImages; i++){
    var index = i+1;  // image files start at 1, not 0
    
    this.bear[i] =
     
    loadImage( test1  + (index)+ ".png");
    
    
  }
  
}

Animation.prototype.next = function() { //go through this loop
  if (this.playing) {
    
    this.imageIndex = (this.imageIndex + this.speed);
    
    if (this.imageIndex >= this.maxImages) {
	    this.imageIndex -= this.maxImages;//loop back to the first image
    }
    
  }
}

Animation.prototype.display = function(_Xpos, _Ypos, _W, _H) { //display like this
var Xpos = _Xpos;
var Ypos = _Ypos;
var W = _W;
var H = _H;

//var alpha = _alpha;
//var saturation = _saturation;
  
  
  image(this.bear[floor(this.imageIndex)], Xpos, Ypos, W, H);//floor is used because the speed cannot be a float so what floor does is tell it draw it at one second OPP would be celling 
}

Animation.prototype.high = function (_Xpos, _Ypos, _W, _H){
var Xpos = _Xpos;
var Ypos = _Ypos;
var W = _W;
var H = _H;
 //noFill();

strokeWeight(2);
 stroke(250);
 fill(this.col);
 rect(_Xpos, _Ypos, _W, _H);
 console.log("this is working");
 }

html

<html>
<head>
  <title>I love you SOOOOOO much</title>
  <script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.9/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="sharonsec3.js"></script>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

</head>
<body>

<img src="comicback.jpg" alt="Smiley face" width="1246" height="700">
</body>
</html>