A canvas library for solid-js
npm install solid-canvas

a solid wrapper around the Canvas API
![226027716-6c1653bb-9db9-43ef-9da5-43452530c495]()
``tsx
import { Canvas, Text, Rectangle } from 'solid-canvas'
const App = () => (
)
`
> You can also compose shapes
`tsx
import { Canvas, Text, Rectangle } from 'solid-canvas'
const App = () => (
)
`

`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)}
>
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 = () => (
)
`
`tsx
import { Canvas, Rectangle, Group } from 'solid-canvas'
const App = () => (
)
`

> All Shape2Ds inherit from Group, so you can clip and add children to any Shape2D
, and `tsx
import { Bezier, Canvas, Line, Quadratic } from 'solid-canvas'
const App = () => (
)
`

- [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] Group
- [x] Shape2D (Shape2D inherits from )
- [x] Color (for fill/stroke)
- [x]
- [x]
- [ ] Path componentsolid-canvas/d
- [x] accepts an svg path constructed with utility-functions from exampleShape2D
- [ ] accepts a raw svg path-string
- [x] MouseEvents for 👉 Shape2D.onMouseDown, Shape2D.onMouseMove and Shape2D.onMouseUpCanvas
- [x] MouseEvents for 👉 Canvas.onMouseDown, Canvas.onMouseMove and Canvas.onMouseUpShape2D
- [x] HoverStyles for Canvas
- [ ] Navigation
- [x] Pan (draggable-prop in )Line
- [ ] Zoom
- [x] Controller-prop: callback which can control the props
- [ ] Handles-controller
- [x] Bezier
- [x] Quadratic
- [x] Rectangle
- [ ] Arc
- [ ]
- [ ] Nestable to divide scene up for optimization (p.ex static background-canvas and dynamic player-canvas)HTML
- [ ] OffscreenCanvas / Offscreen-prop: offload rendering to webworker
- [ ] component: easy way to implement html in Canvas coordinate systemdestination-in
- [ ] Masking with seeObject2D
- [ ] Caching any by rendering result to OffscreenCanvas`
- 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