title: Weird Streaks in HTML5 Canvas Drawing?
body: <p>I'm trying to draw a square of procedurally generated colors using an HTML5 canvas. It should show black at the origin, white at the corner furthest from the origin, and yellow and purple opposite each other in the remaining corners, with various reds in the middle. </p>
  
  <p>Here's a low resolution version I did by hand. In my system, the Y axis is opposite that of canvas's, but that's not important to me, only the generated colors are important. Also in my system, color channels are floats between 0 and 1, not 0 and 255, while the coordinates range from 0 to 1, not 0 to 255.</p>
  
  <p><img src="https://i.stack.imgur.com/FZeX9.jpg" alt="Hand generated mockup of what I want"></p>
  
  <p>Here's the code - dividing by 255 is to account for the fact x and y go from 0 to 255 rather than 0 to 1, dividing by 65025 is just 255^2, to account for the fact x and y are both involved, and multiplying by 255 is because the color channels go from 0 to 255, rather than 0 to 1.</p>
  
  <pre><code>&lt;canvas id = "mainCanvas" width="256" height="256"&gt;&lt;p&gt;Your browser doesn't support canvas.&lt;/p&gt;&lt;/canvas&gt;
  &lt;script&gt;
  function drawPix(x, y, r, g, b) {
      if (r &gt; 255) {
          r = 255;
      }
      if (g &lt; 0) {
          g = 0;
      }
      if (b &lt; 0) {
          b = 0;
      }
      var c = document.getElementById("mainCanvas").getContext("2d");
      c.beginPath();
      c.moveTo(x, y);
      c.lineTo(x + 1, y + 1);
      c.closePath();
      var style = "rgb(" + r + ", " + g + ", " + b + ")";
      c.strokeStyle = style;
      c.stroke();
  }
  
  for (var x = 0; x &lt;= 255; x++) {
      for (var y = 0; y &lt;= 255; y++) {
          drawPix(x, y, x + y, ((2*x/255.0) - (x*y/65025.0) + (y/255.0) - 1) * 255, ((2*y/255.0) - (x*y/65025.0) + (x/255.0) - 1) * 255);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I checked this with Chrome, Firefox, and Safari on OS X, plus with Chrome on Windows 7, and all of them output this image with weird streaks of purple on the right side, and the bottom left corner doesn't have a field of purple like it should.</p>
  
  <p><img src="https://i.stack.imgur.com/Szpe9.png" alt="What my code generates"></p>
  
  <p>I tried checking the logs, but got lost in a sea of information printing every color at every coordinate, so then I made it only output 1/225th as much as below. The weird streaks of purple towards the right still appear in the canvas produced by the below code, but there's no indication of the blue channel being so hight with such a low y value in the console.</p>
  
  <pre><code>&lt;canvas id = "mainCanvas" width="256" height="256"&gt;&lt;p&gt;Your browser doesn't support canvas.&lt;/p&gt;&lt;/canvas&gt;
  &lt;script&gt;
  function drawPix(x, y, r, g, b) {
      if (r &gt; 255) {
          r = 255;
      }
      if (g &lt; 0) {
          g = 0;
      }
      if (b &lt; 0) {
          b = 0;
      }
      if (x % 15 == 0 &amp;&amp; y % 15 == 0) {
          var c = document.getElementById("mainCanvas").getContext("2d");
          c.beginPath();
          c.moveTo(x, y);
          c.lineTo(x + 15, y + 15);
          c.closePath();
          var style = "rgb(" + r + ", " + g + ", " + b + ")";
          console.log("X: " + x + " Y: " + y + ", " + style);
          c.strokeStyle = style;
          c.stroke();
      }
  }
  
  for (var x = 0; x &lt;= 255; x++) {
      for (var y = 0; y &lt;= 255; y++) {
          drawPix(x, y, x + y, ((2*x/255.0) - (x*y/65025.0) + (y/255.0) - 1) * 255, ((2*y/255.0) - (x*y/65025.0) + (x/255.0) - 1) * 255);
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's a JSFiddle of my code, if that helps you help me:
  <a href="http://jsfiddle.net/ArtOfWarfare/wjzhnhy8/" rel="nofollow noreferrer">http://jsfiddle.net/ArtOfWarfare/wjzhnhy8/</a></p>