// Get a reference to the element.
var elem = document.getElementById('myCanvas').getContext('2d');;
var image = new Image();   // Create new Image object  
image.src = 'http://www.internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image.onload = function(){

elem.drawImage(image,50,50);   
  }
  
  
 // Get a reference to the element.
var elem2 = document.getElementById('myCanvas2').getContext('2d');;
var image2 = new Image();   // Create new Image object  
image2.src = 'http://www.internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image2.onload = function(){
elem2.drawImage(image,50,50);
   elem2.beginPath();
   elem2.moveTo(40,40);
   elem2.lineTo(80,40);
   elem2.lineTo(80,80);
   elem2.lineTo(40,80);
   elem2.lineTo(40,40);
   elem2.stroke();
  }
 
 
 // Get a reference to the element.
var elem3 = document.getElementById('myCanvas3').getContext('2d');;
var image3 = new Image();   // Create new Image object  
image3.src = 'http://www.internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image3.onload = function(){

elem3.drawImage(image,50,50, 150, 100);   
  }
  
  
  
   // Get a reference to the element.
var elem4 = document.getElementById('myCanvas4').getContext('2d');;
var image4 = new Image();   // Create new Image object  
image4.src = 'http://www.internet-israel.com/internet_files/pseudo_class/icon.jpg'; // Set source path
image4.onload = function(){

elem4.drawImage(image,0,0,20,20,0,0,40,20);   
  }
  
  
  // Get the canvas element.
  var elem5 = document.getElementById('myCanvas5').getContext('2d');;

 
  // Create a new image.
  var img = new Image();
 
  // Onload function
  img.onload = function(){
 
    // Draw the image on canva.
    elem5.drawImage(this, 0, 0);
 
    // Creating imgd object and using getImageData to copy the image data to it.
    var imgd = elem5.getImageData(0, 0, this.width, this.height);
    //creating the pixel array from the data parameter of imgd object
    var pix = imgd.data;
 
    // Loop over the Array that contains each pixel and invert the color. This function is the inverting function
    for (var i = 0, n = pix.length; i < n; i += 4) {
      pix[i  ] = 255 - pix[i  ]; // red
      pix[i+1] = 255 - pix[i+1]; // green
      pix[i+2] = 255 - pix[i+2]; // blue
      // i+3 is alpha (the fourth element)
    }
 
    // Draw the ImageData object.
    elem5.putImageData(imgd, 0, 0);
  };
 // The source of the picture is the last episode
  img.src = 'http://www.internet-israel.com/internet_files/pseudo_class/icon.jpg';