Draw straight line in canvas app RRS feed

All replies

  • User-474980206 posted

    straight lines are just rectangles. 

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 150, 1); // horizontal 1 pixel line
    ctx.fillRect(10, 10, 1, 100); // vertical 1 pixel line

    you just use rotate() for an angle.

    Tuesday, April 30, 2019 7:58 PM
  • User839733648 posted

    Hi neoaguil17,

    According to your description, I suggest that you could just modify the style of canvas and you will achieve the requirement.

    canvas {
      background: white;
      border: 1px solid red;

    If adding the border style, the result is as your expected.

    Best Regards,


    Wednesday, May 1, 2019 9:05 AM