//CANVAS TRANSFORMATION:

  canvas.font='bold 22px Tahoma'
  canvas.textAlign='start';
  canvas.fillText('start', 10,30);

  canvas.translate(100,150); //canvas.translate() this function moves the canvas around,
  //it takes two params whic is the (x,y) params

  canvas.fillText('after translate', 0, 0);

  canvas.rotate(1);//this method takes only one params and it uses gradient...its is rotates the canvas
  canvas.fillText('after rotate', 0,0);

  canvas.scale(1.5,4);//this method is to increase the size of the rotated text
  canvas.fillText('after scale', 0,20);

  //WORKING WITH IMAGES ON THE CANVAS

  var pic = new Image();
  pic.src="image/unsplash5.jpeg";
  pic.addEventListener('load', function(){
    canvas.drawImage(pic,0,0,x.Width,x.height)
  }, false)


  //USING CANVAS ANIMATION FOR GAMES

  window.addEventListener('mousemove', Animate, false)
};

function Animate (e) {
  // canvas.clearRect(0,0,600,400); // what this does is it takes a shape as a parameter and it clears all the pixels in it.

  var xPosition = e.clientX; //this is to get the position of x in the canvas

  var yPosition = e.clientY;

  canvas.fillRect(xPosition-50,yPosition-50,100,100); // this is saying make a rectangle from the x to the y position(whenever the mouse is moving around)
}

window.addEventListener('load', executeFirst, false)