title: Rectangular Gradient with HTML5 Canvas Element
body: <p>How can I draw a rectangle with a gradient effect like the one pictured below using the HTML5 canvas element?</p>
  
  <p><img src="https://i.stack.imgur.com/JN0Hi.jpg" alt="sample"></p>
  
  <p>Edit: Thanks for all the feedback. Yes, I have already tried many methods. For example, can I use the <code>createRadialGradient</code> method as @Loktar suggests? Here is some sample code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;test&lt;/title&gt;
        &lt;script type="application/x-javascript"&gt;
          function draw() {
            var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d");
  
            var grad1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 50);
            grad1.addColorStop(0, 'rgba(255, 252, 0, 1)');
            grad1.addColorStop(1, 'rgba(68, 205, 37, 1)');
  
            ctx.fillStyle = grad1;
            ctx.fillRect(0, 0, 100, 100);
         }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="draw();"&gt;
      &lt;div&gt;
        &lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But the result is not quite what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/jgMaV.jpg" alt="result"></p>
  
  <p>This should be done easily with a method like <code>PathGradientBrush</code> provided by GDI+.
  I'm not sure is it possible with the HTML5 canvas element.</p>