A line is a straight, one-dimensional figure extending infinitely in both directions. A line segment connects two points, while a ray starts at one point and extends infinitely in one direction. section 1.4.7
Frontend geometry usually works with finite portions of lines. Canvas drawing connects recorded cursor coordinates, while vectors describe movement between points and provide direction and distance. section 1.4.7 section 10.1
Draw a line on canvas
Record the cursor position and use it as the endpoint: ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(250, 100); ctx.stroke(); This draws a finite line segment from (50, 50) to (250, 100). section 1.4.7
Table 1.7 Some geometric examples
| Task |
Code |
Explanation |
| Find the x and y coordinates of the point that represents the current mouse position in JavaScript. |
element.addEventListener
('mousemove', (e) => { const x = e.clientX; const y = e.clientY; }); |
The MouseEvent properties clientX and clientY return the horizontal and vertical positions of the mouse pointer relative to the top-left corner (0, 0) of the browser viewport. |
| Draw a line on a canvas element with JavaScript. |
ctx.beginPath();
ctx.moveTo(50, 50); // Start point
ctx.lineTo(250, 100); // End point
ctx.stroke();
|
Given a canvas context ctx, this code draws a line from the point (50, 50) to (250, 100). |
| Rotate an element 45 degrees in CSS. |
.box { transform: rotate(45deg); }
|
The rotate() CSS function rotates an element. A positive angle rotates the element clockwise; a negative angle rotates it counterclockwise. |
| Create a shape in CSS. |
.shape { clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% ); } |
The clip-path property sets an element’s clipping region to a custom shape—a hexagon, in this case—as defined by the polygon function. |
Use the geometric examples table to compare cursor coordinates, canvas line drawing, and CSS rotation. section 1.4.7
