function drawCanvas5() {
  var canvas = document.getElementById('canvas5');
  if (canvas && canvas.getContext) {
    var ctx = canvas.getContext('2d');             // Get the context : 2 dimensions
    // Blue sky
    var g1 = ctx.createLinearGradient(0,5,0,75);   // Create the gradient
    g1.addColorStop(0,'rgba(0,135,255,1)');        // Set the start to green 100% opacity
    g1.addColorStop(1,'rgba(255,255,255,1)');      // Set the end to white 100% opacity
    ctx.fillStyle = g1;                            // Set the fill with the gradient
    ctx.fillRect(5, 5, 140, 75);                   // Fill the rectangle
    // Green grass
    var g2 = ctx.createLinearGradient(0,75,0,145); // Create the gradient
    g2.addColorStop(0,'rgba(102,204,51,1)');       // Set the start to green 100% opacity
    g2.addColorStop(1,'rgba(255,255,255,1)');      // Set the end to white 100% opacity
    ctx.fillStyle = g2;                            // Set the fill with the gradient
    ctx.fillRect(5, 75, 140, 75);                  // Fill the rectangle
    // Brown box
    var g3 = ctx.createLinearGradient(0,50,0,100); // Create the gradient
    g3.addColorStop(0.6,'rgba(88,60,52,1)');       // Set the start to green 100% opacity
    g3.addColorStop(1,'rgba(88,60,52,0)');         // Set the end to white 100% opacity
    ctx.fillStyle = g3;                            // Set the fill with the gradient
    ctx.fillRect(50, 50, 50, 50);                  // Fill the rectangle
  }
}