title: Draw saturation/brightness gradient
body: <p>I'm trying to draw the following gradient image in canvas, but there's a problem in the right bottom.</p>
  
  <p>Desired effect:</p>
  
  <p><a href="https://i.stack.imgur.com/V6Fy7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V6Fy7.jpg" alt="enter image description here"></a></p>
  
  <p>Current output:</p>
  
  <p><a href="https://i.stack.imgur.com/DdcZJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DdcZJ.jpg" alt="enter image description here"></a></p>
  
  <p>I'm probably missing something really simple here.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function color(r, g, b) {
    var args = Array.prototype.slice.call(arguments);
    if (args.length == 1) {
      args.push(args[0]);
      args.push(args[0]);
    } else if (args.length != 3 &amp;&amp; args.length != 4) {
      return;
    }
    return "rgb(" + args.join() + ")";
  }
  
  function drawPixel(x, y, fill) {
    var fill = fill || "black";
    context.beginPath();
    context.rect(x, y, 1, 1);
    context.fillStyle = fill;
    context.fill();
    context.closePath();
  }
  
  var canvas = document.getElementById("primary");
  var context = canvas.getContext("2d");
  
  canvas.width = 256;
  canvas.height = 256;
  
  for (var x = 0; x &lt; canvas.width; x++) {
    for (var y = 0; y &lt; canvas.height; y++) {
      var r = 255 - y;
      var g = 255 - x - y;
      var b = 255 - x - y;
      drawPixel(x, y, color(r, g, b));
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#primary {
      display: block;
      border: 1px solid gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="primary"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/oqfpnfqq/" rel="nofollow noreferrer">JSFiddle</a></p>