title: Canvas putimagedata is sometimes not drawing like expected
body: <p>I am trying to draw a simple flat line from the left center of my canvas to right side. The starting and ending points will be taken from textbox input. To do this i am first drawing a line from start to end with same html color with canvas to erase previous lines and then drawing the new line. However i am getting inconsistent behaviour. Sometimes it is drawing the input coordinates sometimes it isnt. What i may be doing wrong?</p>
  <p>Here is my html code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;/&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;./css/cizim.css&quot; /&gt;
          &lt;title&gt;Line&lt;/title&gt;
          
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div align=&quot;center&quot;&gt;&lt;canvas width =&quot;400&quot; height=&quot;400&quot; id=&quot;canvas&quot;&gt;
            
          &lt;/canvas&gt;
      &lt;script src=&quot;canvas.js&quot;&gt;&lt;/script&gt;  
          &lt;/div&gt;
          &lt;div align=&quot;center&quot;&gt;
              &lt;table width=&quot;400&quot; border=&quot;0&quot;&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;label for=&quot;fname&quot;&gt;Başlangıç:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;start&quot; name=&quot;fname&quot;&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;label for=&quot;fname&quot;&gt;Bitiş:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type=&quot;text&quot; id=&quot;end&quot; name=&quot;sname&quot;&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td&gt;&lt;button id=&quot;myBtn&quot; onclick=&quot;updateCanvas()&quot;&gt;Draw&lt;/button&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
              
  
          &lt;/div&gt;
          
          
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And here is my javascript code:</p>
  <pre><code>function updateCanvas() {
      var canvas = document.getElementById(&quot;canvas&quot;);
      var start = document.getElementById(&quot;start&quot;).value;
      var end = document.getElementById(&quot;end&quot;).value;
      var canvasWidth = canvas.width;
      var canvasHeight = canvas.height;
      var ctx = canvas.getContext(&quot;2d&quot;);  
      var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
      
      function drawPixel (x, y, r, g, b, a) {
          var index = (x + y * canvasWidth) * 4;
          //pixelDensity(1);
          canvasData.data[index + 0] = r;
          canvasData.data[index + 1] = g;
          canvasData.data[index + 2] = b;
          canvasData.data[index + 3] = a;
      }
  //Drawing 0 to 400 pixels to erase previous line here
      for (var i=0;i&lt;=400;i++){
        drawPixel(i, 200, 247, 176, 84, 255);
      }
  //Drawing new line
      for (var i=start;i&lt;=end;i++){
        drawPixel(i, 200, 255, 0, 0, 255);
      }
      ctx.putImageData(canvasData, 0, 0);
  }
  </code></pre>
  <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 updateCanvas() {
      var canvas = document.getElementById("canvas");
      var start = document.getElementById("start").value;
      var end = document.getElementById("end").value;
      var canvasWidth = canvas.width;
      var canvasHeight = canvas.height;
      var ctx = canvas.getContext("2d");  
      var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
      
      function drawPixel (x, y, r, g, b, a) {
          var index = (x + y * canvasWidth) * 4;
          //pixelDensity(1);
          canvasData.data[index + 0] = r;
          canvasData.data[index + 1] = g;
          canvasData.data[index + 2] = b;
          canvasData.data[index + 3] = a;
      }
      for (var i=0;i&lt;=400;i++){
        drawPixel(i, 200, 247, 176, 84, 255);
      }
      for (var i=start;i&lt;=end;i++){
        drawPixel(i, 200, 255, 0, 0, 255);
      }   
      ctx.putImageData(canvasData, 0, 0);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: #F7B054;
    }
    
    h1 {
      color: white;
      text-align: center;
    }
    
    p {
      font-family: verdana;
      font-size: 20px;
    }
  
    #canvas{
      border: 2px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"/&gt;
          &lt;link rel="stylesheet" href="./css/cizim.css" /&gt;
          &lt;title&gt;Line&lt;/title&gt;
          
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div align="center"&gt;&lt;canvas width ="400" height="400" id="canvas"&gt;
            
          &lt;/canvas&gt;
      &lt;script src="canvas.js"&gt;&lt;/script&gt;  
          &lt;/div&gt;
          &lt;div align="center"&gt;
              &lt;table width="400" border="0"&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;label for="fname"&gt;Başlangıç:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="start" name="fname" value="50"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;label for="fname"&gt;Bitiş:&lt;/label&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" id="end" name="sname" value="300"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;td&gt;&lt;button id="myBtn" onclick="updateCanvas()"&gt;Draw&lt;/button&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
              
  &lt;script src="canvas.js"&gt;&lt;/script&gt;
          &lt;/div&gt;
          
          
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The problem is that with the input being <code>50</code> and <code>300</code> respectively, the line is not displayed. While with <code>100</code> and <code>300</code>, for example, it works well.</p>