Canvas putimagedata is sometimes not drawing like expected

Question

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?

Here is my html code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="./css/cizim.css" />
        <title>Line</title>
        
    </head>
    <body>
        <div align="center"><canvas width ="400" height="400" id="canvas">
          
        </canvas>
    <script src="canvas.js"></script>  
        </div>
        <div align="center">
            <table width="400" border="0">
            <tbody>
              <tr>
                <td><label for="fname">Başlangıç:</label></td>
                <td><input type="text" id="start" name="fname"></td>
              </tr>
              <tr>
                <td><label for="fname">Bitiş:</label></td>
                <td><input type="text" id="end" name="sname"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><button id="myBtn" onclick="updateCanvas()">Draw</button></td>
              </tr>
            </tbody>
          </table>
            

        </div>
        
        
    </body>
</html>

And here is my javascript 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;
    }
//Drawing 0 to 400 pixels to erase previous line here
    for (var i=0;i<=400;i++){
      drawPixel(i, 200, 247, 176, 84, 255);
    }
//Drawing new line
    for (var i=start;i<=end;i++){
      drawPixel(i, 200, 255, 0, 0, 255);
    }
    ctx.putImageData(canvasData, 0, 0);
}

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<=400;i++){
      drawPixel(i, 200, 247, 176, 84, 255);
    }
    for (var i=start;i<=end;i++){
      drawPixel(i, 200, 255, 0, 0, 255);
    }   
    ctx.putImageData(canvasData, 0, 0);
}

body {
    background-color: #F7B054;
  }
  
  h1 {
    color: white;
    text-align: center;
  }
  
  p {
    font-family: verdana;
    font-size: 20px;
  }

  #canvas{
    border: 2px solid black;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="./css/cizim.css" />
        <title>Line</title>
        
    </head>
    <body>
        <div align="center"><canvas width ="400" height="400" id="canvas">
          
        </canvas>
    <script src="canvas.js"></script>  
        </div>
        <div align="center">
            <table width="400" border="0">
            <tbody>
              <tr>
                <td><label for="fname">Başlangıç:</label></td>
                <td><input type="text" id="start" name="fname" value="50"></td>
              </tr>
              <tr>
                <td><label for="fname">Bitiş:</label></td>
                <td><input type="text" id="end" name="sname" value="300"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><button id="myBtn" onclick="updateCanvas()">Draw</button></td>
              </tr>
            </tbody>
          </table>
            
<script src="canvas.js"></script>
        </div>
        
        
    </body>
</html>

The problem is that with the input being 50 and 300 respectively, the line is not displayed. While with 100 and 300, for example, it works well.

Can you create a snippet and sample inputs where it isn't working and explaining how it is different? As your question is right now, in order to help, we would need to guess your CSS, HTML and image. Even though the question is interesting it is unlikely that you will get answers without adding the additional items I have mentioned. Please edit your answer, convert your code chunk to a reproducible snippet and answer me here. Thanks! — Lajos Arpad, May 09 '22 at 09:15
Hi Lajos, i uploaded all my code to a remote site. https://codepen.io/-mer-faruk-durusoy/pen/xxYVjrV For example when i write 100 and 300 to the start and end inputs it draws the line normally and when second time i try to enter 200 and 300 it shortens the line as i expected but then when i try to write 50 and 300 it completely deletes the line. — Faruk, May 10 '22 at 02:35
Thanks for the information! I have added your code as a snippet to your question. — Lajos Arpad, May 10 '22 at 11:43

score 1 · Accepted Answer · answered May 10 '22 at 11:45

The problem is that you are loading input attributes that have a textual type, so "50" is > "300". The solution is to convert them to numbers when you get the values so the comparison will be numerical. See the snippet below:

function updateCanvas() {
    var canvas = document.getElementById("canvas");
    var start = parseInt(document.getElementById("start").value);
    var end = parseInt(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<=400;i++){
      drawPixel(i, 200, 247, 176, 84, 255);
    }
    for (var i=start;i<=end;i++){
      drawPixel(i, 200, 255, 0, 0, 255);
    }   
    ctx.putImageData(canvasData, 0, 0);
}

body {
    background-color: #F7B054;
  }
  
  h1 {
    color: white;
    text-align: center;
  }
  
  p {
    font-family: verdana;
    font-size: 20px;
  }

  #canvas{
    border: 2px solid black;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="./css/cizim.css" />
        <title>Line</title>
        
    </head>
    <body>
        <div align="center"><canvas width ="400" height="400" id="canvas">
          
        </canvas>
    <script src="canvas.js"></script>  
        </div>
        <div align="center">
            <table width="400" border="0">
            <tbody>
              <tr>
                <td><label for="fname">Başlangıç:</label></td>
                <td><input type="text" id="start" name="fname" value="50"></td>
              </tr>
              <tr>
                <td><label for="fname">Bitiş:</label></td>
                <td><input type="text" id="end" name="sname" value="300"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><button id="myBtn" onclick="updateCanvas()">Draw</button></td>
              </tr>
            </tbody>
          </table>
            
<script src="canvas.js"></script>
        </div>
        
        
    </body>
</html>

Ty very much Lajos, string to int conversation didnt came up to mind :) — Faruk, May 10 '22 at 15:44

Canvas putimagedata is sometimes not drawing like expected

1 Answers1