Question 257744 in Html Question posted in
Some basic documentation can be found here.

HTML/CSS/JS Drawing a line from Point A to B

So basically, I want to draw a line from point A (0vh|0vw) to point B (50vh|50vw).
I first thought of using a div with a border and a height of 1 PX that I rotated to get the effect.

The problem with that is that if the site size changes when the user is using an unusual monitor or when he resizes the window, the rotation angle is not right anymore.

So what I want is to draw a line from a fixed point A to a fixed point B, automatically changing the degree of rotation when the site is resized.

Tags:

4

Answers


  1. 0

    Try use 100vh,100vw to body and inside use only px,so the screen will be adapitate but the size of stick no

    Login or Signup to reply.
  2. 0

    As manassehkatz stated, you could use an SVG.

    <svg width="100%" height="100%" style="position:absolute;top:0;left:0;">
  <line x1="0" y1="0" x2="50vw" y2="50vh" style="stroke:red;stroke-width:2" />
</svg>

    You could also use a canvas, but it requires you to implement custom resizing and rendering.

    const ctx = document.getElementById('line-drawing').getContext('2d');

function update() {
  Object.assign(ctx.canvas, {
    width: window.innerWidth,
    height: window.innerHeight,
  });
}

function render() {
  const { width, height } = ctx.canvas;
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(~~(width / 2), ~~(height / 2));
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'red';
  ctx.stroke();
}

update();
render();

window.addEventListener('resize', () => {
  update();
  render();
});
    #line-drawing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
    <canvas id="line-drawing"></canvas>
    Login or Signup to reply.
  3. 0

    I’d recommend using an hr rather than a div (since it’s basically just a rotated horizontal rule) but: yeah, you can totally do this with CSS. However, it needs some functions that at the time of this answer only work in Safari, and Firefox: the CSS sqrt() and atan2 functions.

    We can set the width of our hr to your triangle’s hypotenuse, and set the rotation using atan2 (for more info on this rather special function, see its wikipedia article. It’s so important, it’s literally baked into CPUs as a lowest-level machine instruction) to compute an angle given a distance and rise:

    main {
  --w: 200;
  --h: 100;
  width: calc(1px * var(--w));
  height: calc(1px * var(--h));
  background: red;
}

.line {
  padding: 0;
  margin: 0;
  height: 0px;
  border: 0.5px solid black;
  transform-origin: 0 0;

  /* line from (0,0) to (50% width, 50% height): */
  --lw: calc(var(--w) / 2);
  --lh: calc(var(--h) / 2);

  /* calculate our hypotenuse length and angle: */
  --m: calc(pow(var(--lw), 2) + pow(var(--lh), 2));
  --hyp: sqrt(var(--m));
  width: calc(1px * var(--hyp));

  --angle: atan2(var(--lh), var(--lw));
  transform: rotate(var(--angle));
}
    <main>
  <hr class="line"/>
</main>

    Of course, using SVG would be a heck of a lot easier, and would have better compatibility =D

    Login or Signup to reply.
  4. 0

    A simple (simplistic) way of doing this in CSS is to clip a div which is covering the whole viewport.

    Here’s an example:

    <style>
  .line {
    width: 100vw;
    height: 100vh;
    background: red;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 2px 0, calc(50% + 2px) 50%, 50% 50%);
    position: fixed;
  }
</style>
<div class="line"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search