Pixelated Lines (HTML Canvas)

Question

I made a HTML Canvas with the following code. But some of the lines are pixelated (see photo).

I tried nearly every solution I found in forums but nothing worked for me.

Can anyone help me? Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <canvas id="main_canvas" width="1000px" height="1500px" style="background-color: grey;">Canvas is not available</canvas>
    <script>
      var canvas = document.getElementById("main_canvas");
      var canvasContext = canvas.getContext("2d");
      var listCount = 0;
      var list = [
        [0, 305, 580, 325, 0.5],
        [0, 430, 150, 390, 0.5],
        [150, 390, 410, 90, 0.5],
        [410, 90, 580, 325, 0.5],
        [580, 325, 610, 610, 0.5],
        [150, 390, 610, 610, 0.5],
        [150, 390, 588.49, 405.65, 0.5],
        [297.73, 315.27, 400, 380, 0.5]
      ]
      var interval = setInterval(drawLine, 100);
      function drawLine() {
        if (listCount < list.length) {
          var element = list[listCount];
          canvasContext.beginPath();
          canvasContext.lineWidth = element[4];
          canvasContext.moveTo(element[1] + 0.1, element[0] + 0.1);
          canvasContext.lineTo(element[3] + 0.1, element[2] + 0.1);
          console.log("New Line: " + element[1] + " " + element[0] + " - " + element[3] + " " + element[2]);
          canvasContext.closePath();
          canvasContext.stroke();
          listCount++;
        } else {
          clearInterval(interval);
        }
      }
    </script>
  </body>
</html>

https://stackoverflow.com/questions/38010615/how-can-i-improve-my-html5-canvas-pathing-quality/38059674#38059674 — , Jul 29 '17 at 16:21
I'm afraid you would run into the same issue - for horizontal and vertical lines you should be good, but at some angles there will be anti-aliased pixels there. Sometimes it helps playing with the contrast between fg and bg as well a line thickness to reduce the effect. — , Jul 29 '17 at 16:34

Pixelated Lines (HTML Canvas)

0 Answers0