When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

Question

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

For horizontal and vertical lines, using a translation of 0.5 for odd stroke widths results in crisper and sharper lines. But what about diagonal lines?

Link to jsfiddle

<!DOCTYPE html>
<html lang="en">

<body style="background: black">
    <button id="btn">Draw Next Line</button>
    <br>
    <canvas style="border: 2px solid red" id="cnv"></canvas>
    <script>
        const ctx = document.getElementById("cnv").getContext("2d");

        debugger;

        const delta = 25;
        const color = 'white';

        const W = window.innerWidth - 80;
        const H = window.innerHeight - 100;
        ctx.canvas.width = W;
        ctx.canvas.height = H;

        ctx.lineWidth = 1;
        ctx.strokeStyle = color;

        // diagonal line.
        ctx.moveTo(0.5, 0);
        ctx.lineTo(W, H);


        ctx.stroke();

        // vertical lines
        let i = 0.5;
        document.getElementById("btn").onclick = () => {
            ctx.moveTo(i * delta, 0);
            ctx.lineTo(i * delta, H);
            ctx.stroke();
            i++;
        }


    </script>
</body>

</html>

Observing the demo reveals that adding another line after the diagonal lines causes them to become bolder or thicker. How can we achieve consistent thickness and sharpness regardless of whether the diagonal line is drawn first or last?

javascript typescript canvas graphics html5-canvas

Answer 1

Answer №1

Make sure to include the ctx.beginPath(); call before each new line is drawn:

<!DOCTYPE html>
<html lang="en">

<body style="background: black">
    <button id="btn">Draw Next Line</button>
    <br> 
    <canvas style="border: 2px solid red" id="cnv"></canvas>
    <script>
        const ctx = document.getElementById("cnv").getContext("2d");

        debugger;

        const delta = 25;
        const color = 'white';

        const W = window.innerWidth - 80;
        const H = window.innerHeight - 100;
        ctx.canvas.width = W;
        ctx.canvas.height = H;

        ctx.lineWidth = 1;
        ctx.strokeStyle = color;

        // diagonal line.
        ctx.moveTo(0.5, 0);
        ctx.lineTo(W, H);


        ctx.stroke();
        
        // vertical lines
        let i = 0.5;
        document.getElementById("btn").onclick = () => {
            ctx.beginPath(); // Ensure this line is included before drawing a new line
            ctx.moveTo(i * delta, 0);
            ctx.lineTo(i * delta, H);
            ctx.stroke();
            i++;
        }


    </script>
</body>

</html>

Answer 2

Make sure to include the ctx.beginPath(); call before each new line is drawn:

<!DOCTYPE html>
<html lang="en">

<body style="background: black">
    <button id="btn">Draw Next Line</button>
    <br> 
    <canvas style="border: 2px solid red" id="cnv"></canvas>
    <script>
        const ctx = document.getElementById("cnv").getContext("2d");

        debugger;

        const delta = 25;
        const color = 'white';

        const W = window.innerWidth - 80;
        const H = window.innerHeight - 100;
        ctx.canvas.width = W;
        ctx.canvas.height = H;

        ctx.lineWidth = 1;
        ctx.strokeStyle = color;

        // diagonal line.
        ctx.moveTo(0.5, 0);
        ctx.lineTo(W, H);


        ctx.stroke();
        
        // vertical lines
        let i = 0.5;
        document.getElementById("btn").onclick = () => {
            ctx.beginPath(); // Ensure this line is included before drawing a new line
            ctx.moveTo(i * delta, 0);
            ctx.lineTo(i * delta, H);
            ctx.stroke();
            i++;
        }


    </script>
</body>

</html>

Answer 3

Answer №2

To tackle this task, I would begin by conducting some research and then manually drawing a line using pixels along with an online algorithm. It is essential to utilize a special pixel function to ensure that the same effect is not repeated over each individual pixel. Discovering the draw_line function from this source was quite helpful in this process.

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

var r = 255
var g = 255
var b = 255

function pixel(x, y) {
  var id = ctx.createImageData(1, 1); // only do this once per page
  var d = id.data; // only do this once per page
  d[0] = r;
  d[1] = g;
  d[2] = b;
  d[3] = 255;
  ctx.putImageData(id, x, y);
}

let draw_line = (x1, y1, x2, y2) => {
  // Iterators, counters required by algorithm
  let x, y, dx, dy, dx1, dy1, px, py, xe, ye, i;
  // Calculate line deltas
  dx = x2 - x1;
  dy = y2 - y1;
  // Create a positive copy of deltas (makes iterating easier)
  dx1 = Math.abs(dx);
  dy1 = Math.abs(dy);
  // Calculate error intervals for both axis
  px = 2 * dy1 - dx1;
  py = 2 * dx1 - dy1;
  // The line is X-axis dominant
  if (dy1 <= dx1) {
    // Line is drawn left to right
    if (dx >= 0) {
      x = x1;
      y = y1;
      xe = x2;
    } else { // Line is drawn right to left (swap ends)
      x = x2;
      y = y2;
      xe = x1;
    }
    pixel(x, y); // Draw first pixel
    // Rasterize the line
    for (i = 0; x < xe; i++) {
      x = x + 1;
      // Deal with octants...
      if (px < 0) {
        px = px + 2 * dy1;
      } else {
        if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
          y = y + 1;
        } else {
          y = y - 1;
        }
        px = px + 2 * (dy1 - dx1);
      }
      // Draw pixel from line span at
      // currently rasterized position
      pixel(x, y);
    }
  } else { // The line is Y-axis dominant
    // Line is drawn bottom to top
    if (dy >= 0) {
      x = x1;
      y = y1;
      ye = y2;
    } else { // Line is drawn top to bottom
      x = x2;
      y = y2;
      ye = y1;
    }
    pixel(x, y); // Draw first pixel
    // Rasterize the line
    for (i = 0; y < ye; i++) {
      y = y + 1;
      // Deal with octants...
      if (py <= 0) {
        py = py + 2 * dx1;
      } else {
        if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
          x = x + 1;
        } else {
          x = x - 1;
        }
        py = py + 2 * (dx1 - dy1);
      }
      // Draw pixel from line span at
      // currently rasterized position
      pixel(x, y);
    }
  }
}


for (var i = 0; i < 50; i++) {
  draw_line(0, 0, 50, 100)
}

<canvas></canvas>

Answer 4

To tackle this task, I would begin by conducting some research and then manually drawing a line using pixels along with an online algorithm. It is essential to utilize a special pixel function to ensure that the same effect is not repeated over each individual pixel. Discovering the draw_line function from this source was quite helpful in this process.

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

var r = 255
var g = 255
var b = 255

function pixel(x, y) {
  var id = ctx.createImageData(1, 1); // only do this once per page
  var d = id.data; // only do this once per page
  d[0] = r;
  d[1] = g;
  d[2] = b;
  d[3] = 255;
  ctx.putImageData(id, x, y);
}

let draw_line = (x1, y1, x2, y2) => {
  // Iterators, counters required by algorithm
  let x, y, dx, dy, dx1, dy1, px, py, xe, ye, i;
  // Calculate line deltas
  dx = x2 - x1;
  dy = y2 - y1;
  // Create a positive copy of deltas (makes iterating easier)
  dx1 = Math.abs(dx);
  dy1 = Math.abs(dy);
  // Calculate error intervals for both axis
  px = 2 * dy1 - dx1;
  py = 2 * dx1 - dy1;
  // The line is X-axis dominant
  if (dy1 <= dx1) {
    // Line is drawn left to right
    if (dx >= 0) {
      x = x1;
      y = y1;
      xe = x2;
    } else { // Line is drawn right to left (swap ends)
      x = x2;
      y = y2;
      xe = x1;
    }
    pixel(x, y); // Draw first pixel
    // Rasterize the line
    for (i = 0; x < xe; i++) {
      x = x + 1;
      // Deal with octants...
      if (px < 0) {
        px = px + 2 * dy1;
      } else {
        if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
          y = y + 1;
        } else {
          y = y - 1;
        }
        px = px + 2 * (dy1 - dx1);
      }
      // Draw pixel from line span at
      // currently rasterized position
      pixel(x, y);
    }
  } else { // The line is Y-axis dominant
    // Line is drawn bottom to top
    if (dy >= 0) {
      x = x1;
      y = y1;
      ye = y2;
    } else { // Line is drawn top to bottom
      x = x2;
      y = y2;
      ye = y1;
    }
    pixel(x, y); // Draw first pixel
    // Rasterize the line
    for (i = 0; y < ye; i++) {
      y = y + 1;
      // Deal with octants...
      if (py <= 0) {
        py = py + 2 * dx1;
      } else {
        if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
          x = x + 1;
        } else {
          x = x - 1;
        }
        py = py + 2 * (dx1 - dy1);
      }
      // Draw pixel from line span at
      // currently rasterized position
      pixel(x, y);
    }
  }
}


for (var i = 0; i < 50; i++) {
  draw_line(0, 0, 50, 100)
}

<canvas></canvas>

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

Answer №1

Answer №2

Similar questions

What is the correct way to initialize and assign an observable in Angular using AngularFire2?

Development and staging setups tailored specifically for a JavaScript SDK

Leveraging the power of the three.js library on the client-side within a vue.js/n

Creating a merged object from a split string array in TypeScript

The code malfunctions following the maintenance

Automate the process of saving information to Google Sheets using Google AppScript

Generating a React User-Object in JSON Format

Retrieve the element located within a "block" element that is relative to the user's click event, without the

MUI Grid with Custom Responsive Ordering

What are the best practices for effectively utilizing the nodejs Stream API?

Issue with React occurring when attempting to delete an input component

JavaScript code to generate a UTF8 string from UTF codes

The type 'void | Observable<User>' does not include the property 'subscribe'. Error code: ts(2339)

SPFx WebPart - Tabbed Interface

Utilizing Typescript to Inject Generics and Retrieve the Name of an ES6 Module

Issue arises when fastify/websocket is being used and an argument of type '{ websocket: boolean; }' is not compatible or able to be assigned to a parameter

Emptying the trumbowyg editor within an Angular environment

Tips for inserting an HTML element within an exported constant

Tips for deleting a button from a DataTable file upload feature

Sending a object as an argument to a function