Course notes 34
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Moving amongst 4 Canvas elements

var ctx1, ctx2, ctx3, ctx4, wrapper, direction;
  var timer = null;
  var steps = 0;
  var sizeOfSteps=20;
  var startPos=0;
  var rightScreenStart=(-320);
  var bottomScreenStart=(-480);
  
//*********************** initialization ************************************
function init(){
	//this is the div around what you want to move
	wrapper = document.getElementById('wrapper');
	
    canvas1 = document.getElementById('myCanvas1');
    ctx1 = canvas1.getContext('2d');
   
    canvas2 = document.getElementById('myCanvas2');
    ctx2 = canvas2.getContext('2d');

    canvas3 = document.getElementById('myCanvas3');
    ctx3 = canvas3.getContext('2d');
   
    canvas4 = document.getElementById('myCanvas4');
    ctx4 = canvas4.getContext('2d');
	
	drawBackgrounds();
   
	canvas1.addEventListener('click', moveRight, false);
    canvas2.addEventListener('click', moveDown, false);
	canvas3.addEventListener('click', moveLeft, false);
	canvas4.addEventListener('click', moveUp, false);
}

//*************************** draw the backgrounds *******************************

function drawBackgrounds () {
	var myImage1 = new Image();
	var myImage2 = new Image();
	var myImage3 = new Image();
	var myImage4 = new Image();

	myImage1.onload = function() {
	ctx1.drawImage(myImage1, 0, 0, 320, 480);
	ctx2.drawImage(myImage2, 0, 0, 320, 480);
	ctx3.drawImage(myImage3, 0, 0, 320, 480);
	ctx4.drawImage(myImage4, 0, 0, 320, 480);
	}

	myImage1.src = "../images/screen1.jpg";
	myImage2.src = "../images/screen2.jpg";
	myImage3.src = "../images/screen3.jpg";
	myImage4.src = "../images/screen4.jpg";
}

//*********************actually move the div******************************
  function moveTheObj(pushIt)
  {
	  if (direction == "right") {
			wrapper.style.left = pushIt+"px";
	  } else if (direction == "down") {
			wrapper.style.top = pushIt+"px";
	  } else if (direction == "left") {
			wrapper.style.left = pushIt+"px";
	  } else if (direction == "up") {
			wrapper.style.top = pushIt+"px";
	  }
  }

//****************figure out which direction to move the screen*************************
 function moveScreen(){
	 
	 if (direction == "right") {
    	x = startPos-(sizeOfSteps*steps);
    	moveTheObj(x); 
    	steps++;
    	if (x < rightScreenStart)  //has it reached the end?
    	{	
			moveTheObj(rightScreenStart);
			stopMove();
    	}
	 } else if (direction == "down") {
		y = startPos-(sizeOfSteps*steps); 
		moveTheObj(y); 
    	steps++;
		
    	if (y < bottomScreenStart)  //has it reached the end?
    	{	
			moveTheObj(bottomScreenStart);
			stopMove();
    	}
	 } else if (direction == "left") {   
		x = rightScreenStart+(sizeOfSteps*steps);
		moveTheObj(x); 
    	steps++;	
    	if (x>startPos)  //has it reached the end?
    	{	
			moveTheObj(startPos);
			stopMove();
    	}
	 } else if (direction == "up") { 
	 
		y = bottomScreenStart+(sizeOfSteps*steps);
		moveTheObj(y); 
    	steps++;	
    	if (y>startPos)  //has it reached the end?
    	{	
			moveTheObj(startPos);
			stopMove();
    	}
	 } 
  }
//**************************** Start the Interval ************************************
  function moveRight()
  {
	direction = "right";
    timer = setInterval(moveScreen, 1);  //call the function every 1 millisecond
  }
  
  function moveDown()
  {
	direction = "down";
    timer = setInterval(moveScreen, 1);
  }
  
    function moveLeft()
  {
	direction = "left";
    timer = setInterval(moveScreen, 1);
  }
    function moveUp()
  {
	direction = "up";
    timer = setInterval(moveScreen, 1);
  }

// ************** Stop the movement of the screen ************* 
  function stopMove()
  
  {
	  clearInterval(timer);
      steps = 0;
  }

Click to see all the screens in the example (view the source)

Click to see the 4 Canvas Move example (view the source)