function drawCanvas4() {
  var canvas = document.getElementById('canvas4');
  if (canvas && canvas.getContext) {
    var ctx = canvas.getContext('2d');          // Get the context : 2 dimensions
    var img = new Image();                      // Create the image
    img.src = './images/canvas/grid.png';       // Set the source of the image
    img.onload = function() {                   // Define loading process
      ctx.drawImage(img, 0, 0);                 // Draw the image
      ctx.beginPath();                          // Open the path
      ctx.moveTo(6, 144);                       // Move
      ctx.lineTo(50, 66);                       // Create a line
      ctx.lineTo(83, 76);                       // Create a line
      ctx.lineTo(135, 15);                      // Create a line
      ctx.lineTo(135, 144);                     // Create a line
      ctx.fillStyle = 'rgba(105,172,212,0.7)';  // Set to light blue 70% opacity
      ctx.fill();                               // Close and fill the path
      ctx.beginPath();                          // Open the path
      ctx.moveTo(6, 144);                       // Move
      ctx.lineTo(50, 66);                       // Create a line
      ctx.lineTo(83, 76);                       // Create a line
      ctx.lineTo(135, 15);                      // Create a line
      ctx.strokeStyle = 'rgba(34,122,255,0.7)'; // Set to dark blue 70% opacity
      ctx.stroke();                             // Close and fill the path
    }
  }
}