liveBook · Manning

Line segment

As explained in Math for Web Design

A line segment is the finite portion of a line between two endpoints.

A line segment is the finite straight path connecting two points. Unlike a line, it does not continue forever; its endpoints define where it starts and stops. On a screen, segments appear as canvas strokes, element edges, and direct movement paths. section 1.4.7 section 10.1

Describe a segment with two coordinate points, such as A(x1, y1) and B(x2, y2). It can also be described by one endpoint plus a direction vector: the vector from A to B gives both the direction and displacement of an element moving along the segment. section 10.1

Draw a canvas segment

For a drawing interface, mouse coordinates provide points on the canvas. Start a path at one point, then call lineTo() with the next point to create the visible straight segment. Repeating this as the pointer moves builds a sketch from connected segments. 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 canvas example to verify how start and end coordinates become a rendered line segment, alongside related coordinate and rotation tasks. section 1.4.7

Segments also help model layout. An element edge is a segment, while a bounding box can be understood from a top-left point and a size vector extending toward its bottom-right corner. This makes positions, dimensions, and motion comparable in the same coordinate system. section 10.1

How Math for Web Design covers it

How deep it goes
Defines segments through endpoints and direction vectors, then relates them to bounding boxes without deriving segment-length formulas.
Examples
Shows cursor-coordinate sketching and a canvas line from (50, 50) to (250, 100).
What you can do after
Apply it via the Canvas API to draw straight paths and via coordinates or vectors to describe UI motion.
How it connects
Connects line segments with points, vectors, bounding boxes, angles, canvas, and CSS transforms.
Cover of Math for Web Design
liveBookmanning.com
Read Math for Web Design on liveBook Get the book at manning.com

Also explained in

Compare how 4 books explain line segment →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.