Draw a line at a canvas

Believer Published at Dev

Believer

Currently I have this code:

sample.beginPath();
sample.moveTo(X1.x,Y1.x );
sample.lineTo(X2.x,Y2.y);
sample.stroke();

sample.beginPath();
sample.arc(X2.x, Y2.y, 4, 0, 2 * Math.PI, false);
sample.fill();
sample.lineWidth = 1;
sample.stroke();

This will create this :

This will point in any direction.

What I want is this:

Note:

1.There will only be one line, either Line A or B.

2.They will always point from left to right.

3. They are in 45 degrees.

dbajgoric

Take a look at the following figure:

Point (x1,y1) is the starting point of the mouse. Assuming that mouse has moved to the right (you'll have to handle the case when it moves left), new mouse coordinates will be (x2,y2). However, we don't want to draw the line between (x1,y1) and (x2,y2), because the slop of this line (the angle) won't be the desired one. So we must calculate the coordinates of the new point P, that stands on our line. Note: I assumed that x-coordinate of this point will be equal to new mouse-x coordinate x2!

With this assumption and with help of some basic 2D geometry we get:

a = x2 - x1
tan(alpha) = b / a => b = a * tan(alpha)
P.x = x2

Value of the P.y coordinate depends on whether mouse has moved up or down from the start position.

IF (y1 > y2)
    P.y = y1 - b // Mouse has moved up (drawing shows this scenario)
ELSE
    P.y = y1 + b // Mouse has moved down (not shown in the drawing)

So we have a new point P, and now you can simply draw the line between (x1,y1) and P. You also have to handle some special case such as what if mouse moves to the left of starting point.

In order to get your point P, you should plug-in your desired angle as well (it can be different than 45 degrees, but it has to be a positive angle - you could derive formula that will work fine with negative angles as well).

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-21

Comments

0 comments

From Dev

Related Related

Article

Draw a line at a canvas

Draw a line at a canvas

How to draw a line on a canvas?

How to draw the line in canvas

Draw line inside canvas

How to draw a line on a canvas?

JavaFX - draw line with arrow (Canvas)

Can't draw a line on the canvas

JavaFX - draw line with arrow (Canvas)

How to draw a line in canvas with a background image

JS Canvas - draw line at a specified angle

Draw rectangles on line of circle on a canvas in android

How to draw random/irregular line in XAML canvas?

Draw a line within a Fragment using Canvas in Android

RXJS draw line on html5 canvas

Draw HTML5 Canvas pulse line

HTML/JS Canvas draw line between objects

How to draw line - not on Canvas, just object?

Draw vertical line between circles in canvas

How to draw a continuous line with mouse on JavaFX canvas?

Draw a line within a Fragment using Canvas in Android

How to draw a line in canvas with a background image

JS Canvas - draw line at a specified angle

How to draw a line in Delphi on an FMX canvas

Draw vertical line along the entire height of the canvas?

showing one line on canvas which I draw before clear canvas

How to draw an 1 pixel line using Javafx Canvas?

How to draw a line on a canvas using fabric.js

How to draw a curved line between 2 points on canvas?

HTML5 Canvas draw line distance between points

How to draw a rectangle perpendicular to a line, or to the tangent of a curve, in JavaScript Canvas