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> </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> </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.
The problem is that you are loading
inputattributes 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: