YouTip

## HTML Canvas lineTo() Method The `lineTo()` method of the Canvas 2D API adds a straight line to the current sub-path by connecting the sub-path's last point to the specified `(x, y)` coordinates. Note that this method only defines the path of the line; it **does not** actually draw the line on the canvas. To render the path visually, you must call the `stroke()` or `fill()` method. --- ## Browser Support The `lineTo()` method is widely supported across all modern web browsers: * Google Chrome * Microsoft Edge / Internet Explorer 9+ * Mozilla Firefox * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the `` element.* --- ## Syntax and Parameters ### JavaScript Syntax ```javascript context.lineTo(x, y); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `x` | Number | The x-coordinate (horizontal) of the end point of the line. | | `y` | Number | The y-coordinate (vertical) of the end point of the line. | --- ## How It Works 1. **`beginPath()`**: Starts a new path or resets the current path. 2. **`moveTo(x, y)`**: Moves the starting point of the path to the specified coordinates without drawing a line. If you do not call `moveTo()` before calling `lineTo()`, the first `lineTo()` call will behave like `moveTo()`. 3. **`lineTo(x, y)`**: Defines a line from the current position to the new `(x, y)` position. 4. **`stroke()`**: Actually draws the defined path on the canvas with the current stroke style. --- ## Code Examples ### Example 1: Drawing a Simple Diagonal Line This example starts a path, moves the pen to the top-left corner `(0, 0)`, and defines a line to the coordinates `(300, 150)`. #### HTML ```html Your browser does not support the HTML5 canvas tag. ``` #### JavaScript ```javascript var canvas = document.getElementById("simpleLineCanvas"); var ctx = canvas.getContext("2d"); // Start a new path ctx.beginPath(); // Move the pen to the starting point (0, 0) ctx.moveTo(0, 0); // Define a line to the destination point (300, 150) ctx.lineTo(300, 150); // Render the line on the canvas ctx.stroke(); ``` --- ### Example 2: Drawing Connected Lines (L-Shape) You can chain multiple `lineTo()` calls to create connected segments. This example draws an "L" shape by connecting three points. #### HTML ```html Your browser does not support the HTML5 canvas tag. ``` #### JavaScript ```javascript var canvas = document.getElementById("lShapeCanvas"); var ctx = canvas.getContext("2d"); // Start a new path ctx.beginPath(); // Move to the starting point of the "L" ctx.moveTo(20, 20); // Draw the vertical line down ctx.lineTo(20, 100); // Draw the horizontal line to the right ctx.lineTo(70, 100); // Render the path ctx.stroke(); ``` --- ## Important Considerations * **Path State:** The `lineTo()` method requires a starting point. If the path is empty (e.g., `beginPath()` was called but no `moveTo()` or drawing commands have occurred), the first call to `lineTo(x, y)` acts exactly like `moveTo(x, y)`. * **Styling:** You can customize the appearance of the line before calling `stroke()`. Use properties like `ctx.lineWidth` to change the thickness, and `ctx.strokeStyle` to change the color. * **Closing Paths:** If you are drawing a closed shape (like a triangle or polygon), you can use `ctx.closePath()` instead of drawing the final line back to the start. This ensures the corners are joined cleanly.