Line

Draw a straight line between two points with color, thickness, and solid, dashed, or dotted styles

Props

colorstring

Default:#ffffff

The color of the line

color

stringDefault: #ffffff

The color of the line

pointA{x: number, y: number}

Default:{"x":0.2,"y":0.5}

The start point of the line

pointA

{x: number, y: number}Default: {"x":0.2,"y":0.5}

The start point of the line

pointB{x: number, y: number}

Default:{"x":0.8,"y":0.5}

The end point of the line

pointB

{x: number, y: number}Default: {"x":0.8,"y":0.5}

The end point of the line

thicknessnumber

Default:0.01

The thickness of the line. A value of one (1) matches the canvas height.

thickness

numberDefault: 0.01

The thickness of the line. A value of one (1) matches the canvas height.

style"solid" | "dashed" | "dotted"

Default:solid

The line style: solid, dashed, or dotted. Dashes and dots are spaced to land exactly on both endpoints.

style

"solid" | "dashed" | "dotted"Default: solid

The line style: solid, dashed, or dotted. Dashes and dots are spaced to land exactly on both endpoints.

dashLengthnumber

Default:0.05

The length of each dash, including its caps

dashLength

numberDefault: 0.05

The length of each dash, including its caps

gapLengthnumber

Default:0.025

The gap between dashes, or the spacing between dots

gapLength

numberDefault: 0.025

The gap between dashes, or the spacing between dots

capStart"square" | "rounded"

Default:rounded

Cap shape at the start of the line (point A). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the A-facing end of each dash and dot.

capStart

"square" | "rounded"Default: rounded

Cap shape at the start of the line (point A). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the A-facing end of each dash and dot.

capEnd"square" | "rounded"

Default:rounded

Cap shape at the end of the line (point B). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the B-facing end of each dash and dot.

capEnd

"square" | "rounded"Default: rounded

Cap shape at the end of the line (point B). Rounded caps center on the endpoint; square caps end flat exactly at it. Also shapes the B-facing end of each dash and dot.

Usage

<Shader>
  <Line
    color="#ffffff"
  />
</Shader>

<Shader>
  <Line
    color="#ffffff"
  />
</Shader>

<Shader>
  <Line
    color="#ffffff"
  />
</Shader>

<Shader>
  <Line
    color="#ffffff"
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Line', props: { color: '#ffffff' } }
  ]
})

LightLeak

LinearBlur