<head>
  <script type='text/javascript'>
    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 blue 100% opacity
        g1.addColorStop(1,'rgba(255,255,255,1)');     // Set white 100% opacity
        ctx.fillStyle = g1;                           // 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 green 100% opacity
        g2.addColorStop(1,'rgba(255,255,255,1)');     // Set white 100% opacity
        ctx.fillStyle = g2;                           // 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 brown 100% opacity
        g3.addColorStop(1,'rgba(88,60,52,0)');        // Set brown 0% opacity
        ctx.fillStyle = g3;                           // Fill with the gradient
        ctx.fillRect(50, 50, 50, 50);                 // Fill the rectangle
      }
    }
    window.onload = function() {
      drawCanvas5();
    }
  </script>
</head>
<body>
  <canvas id='canvas5' width='150px' height='150px'></canvas>
</body>
