🎨 solid-canvas


a solid wrapper around the Canvas API
![226027716-6c1653bb-9db9-43ef-9da5-43452530c495]()

source

source

source

source

source

$3

``tsx
import { Canvas, Text, Rectangle } from 'solid-canvas'

const App = () => (


position={{ x: 100, y: 100 }}
dimensions={{ width: 250, height: 250 }}
fill="purple"
stroke="transparent"
/>

)
`

> You can also compose shapes

`tsx
import { Canvas, Text, Rectangle } from 'solid-canvas'

const App = () => (

position={{ x: 100, y: 100 }}
dimensions={{ width: 250, height: 250 }}
fill="purple"
stroke="transparent"
>



)
`

$3

`tsx
import { Canvas, Rectangle } from 'solid-canvas'

const App: Component = () => {
const [selected, setSelected] = createSignal(false)
const [position, setPosition] = createSignal({ x: 100, y: 100 })

return (
onMouseMove={event => {
if (!selected()) return
setPosition(position => ({
x: position + event.delta.x,
y: position + event.delta.y,
}))
}}
onMouseUp={() => setSelected(false)}
>
position={position()}
dimensions={{ width: 50, height: 50 }}
onMouseDown={() => setSelected(true)}
/>

)
}
`

> Each Shape2D also has a controller-prop which accepts functions that alter the component's prop: an example of this is Drag

`tsx
import { Canvas, Rectangle } from 'solid-canvas'

const App = () => (

position={{ x: 100, y: 100 }}
dimensions={{ width: 50, height: 50 }}
controllers{[Drag()]}
/>

)
`

$3

`tsx
import { Canvas, Rectangle, Group } from 'solid-canvas'

const App = () => (

position={{ x: 100, y: 100 }}
clip={() => (
<>
position={{ x: 0, y: 0 }}
dimensions={{ width: 100, height: 50 }}
/>
position={{ x: 0, y: 0 }}
dimensions={{ width: 50, height: 100 }}
/>

)}
fill="blue"
>



)
`

> All Shape2Ds inherit from Group, so you can clip and add children to any Shape2D

Lines: , and

`tsx
import { Bezier, Canvas, Line, Quadratic } from 'solid-canvas'

const App = () => (

position={{ x: 100, y: 100 }}
points={[
{ x: 0, y: 0 },
{ x: 50, y: 100 },
{ x: 100, y: 0 },
{ x: 150, y: 100 },
{ x: 200, y: 0 },
{ x: 250, y: 100 },
]}
/>
position={{ x: 500, y: 100 }}
points={[
{ point: { x: 0, y: 0 }, control: { x: 50, y: 0 } },
{ point: { x: 50, y: 100 }, control: { x: -50, y: 0 } },
{ point: { x: 100, y: 0 }, control: { x: -50, y: 0 } },
{ point: { x: 150, y: 100 }, control: { x: -50, y: 0 } },
{ point: { x: 200, y: 0 }, control: { x: -50, y: 0 } },
{ point: { x: 250, y: 100 }, control: { x: -50, y: 0 } },
]}
/>
position={{ x: 900, y: 150 }}
points={[
{ point: { x: 0, y: 0 }, control: { x: 25, y: -100 } },
{ point: { x: 50, y: 0 } },
{ point: { x: 100, y: 0 } },
{ point: { x: 150, y: 0 } },
{ point: { x: 200, y: 0 } },
{ point: { x: 250, y: 0 } },
]}
/>

)
`

Canvas API-Coverage

- [x] Object2D
- [x]
- [x] Shape2D
- [x]
- [x]
- [x] Path2D
- [x]
- [x]
- [x]
- [x]
- [x]
- [ ] Compositing
- [ ] (to 'properly' composite groups we should render to offscreencanvas first)
- [x] Shape2D
- [x] Clipping
- [x]
- [x] Shape2D (Shape2D inherits from Group)
- [x] Color (for fill/stroke)
- [x]
- [x]

Additional API

- [ ] Path component
- [x] accepts an svg path constructed with utility-functions from solid-canvas/d example
- [ ] accepts a raw svg path-string
- [x] MouseEvents for Shape2D 👉 Shape2D.onMouseDown, Shape2D.onMouseMove and Shape2D.onMouseUp
- [x] MouseEvents for Canvas 👉 Canvas.onMouseDown, Canvas.onMouseMove and Canvas.onMouseUp
- [x] HoverStyles for Shape2D
- [ ] Navigation
- [x] Pan (draggable-prop in Canvas)
- [ ] Zoom
- [x] Controller-prop: callback which can control the props
- [ ] Handles-controller
- [x] Line
- [x] Bezier
- [x] Quadratic
- [ ] Rectangle
- [ ] Arc
- [ ] Nestable to divide scene up for optimization (p.ex static background-canvas and dynamic player-canvas)
- [ ] OffscreenCanvas / Offscreen-prop: offload rendering to webworker
- [ ] HTML component: easy way to implement html in Canvas coordinate system
- [ ] Masking with destination-in see
- [ ] Caching any Object2D by rendering result to OffscreenCanvas`

Overal Ambitions / Roadmap

- Cover the whole Canvas-API
- Provide tools to simplify common canvas operations
- Explore render-optimizations:
- Only render what is in viewport
- Only render the bounds of Shape2Ds that has changed
- Treeshakable: minimal use should result in minimal bundle