Skip to content

0H Drawing lines to the canvas

Luis Murillo Baltodano edited this page Aug 30, 2020 · 8 revisions

Need an object like

laidLines | normalLines [
    {
        x Number // canvas x coord
        y Number // canvas y coord
    }
]
lines {
    x Number                      // canvas x coord (optional for laidLines)
    y Number                      // canvas y coord (optional for laidLines)
    color CanvasColorString           // border color
    thickness LineThicknessNumber > 0     // line thickness
    rotation RotationDegreeNumber      // laid figure rotation (optional for laidLines)
    group laidLines | normalLines // array of {x, y} vectors
    scale Number                  // scaling of the group
}

What means to have laid lines

Think about a group of vectors that when you trace a line trough them you end up with the shape a plane, bird, car, hat, etc. If you had that group of vectors coords initially laid to left top side of the canvas you would have a group of laid lines

In other words, the lowest x coord of the group equals 0 and the lowest y coord equals 0 as well, while the shape still intact

Why is laidLines useful?

If you had a specific shape shaped with a group of vectors, let's say a boot, you could rotate it and set its position with just one x and y coord and you would not have to change each x and y of each vector of the line, same with rotation, just set the 'rotation' property and the shape will rotate in whatever x and y position it is

When does it applies

When you set the 'rot' property or rotation to any number

Use the render function

render(myLinesObject).lines()

Example

const myLinesObject= {
    x: 73,
    y: 42,
    thickness: 2,
    color: '#44f',
    rotation: 45,
    group: [
        {x: 0, y: 0},
        {x: 0, y: 100}
    ]
}

preset(({size, render}) => {
    size()
    render(myLinesObject).lines()
}, '#canvasForLines')
Clone this wiki locally