KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

solid-canvas

★ 28 Open GitHub ↗

(WIP) 🎨 A Canvas API-wrapper for solidjs ⚡ by solid and @solid-primitives/jsx-tokenizer

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🎨 solid-canvas

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)

a solid wrapper around the `Canvas` API

[source](https://github.com/bigmistqke/solid-canvas/blob/main/dev/pages/rectangles.tsx)

[source](https://github.com/bigmistqke/solid-canvas/blob/main/dev/pages/Cubics.tsx)

[source](https://github.com/bigmistqke/solid-canvas/blob/main/dev/pages/Smileys.tsx)

[source](https://github.com/bigmistqke/solid-canvas/blob/main/dev/pages/Feedback.tsx)

[source](https://github.com/bigmistqke/solid-canvas/blob/main/dev/pages/EditableCurves.tsx)

### Simple example

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

const App = () => (
  <Canvas fill="blue">
    <Text position={{ x: 100, y: 100 }} text="hallo" fill="white" size={20} />
    <Rectangle
      position={{ x: 100, y: 100 }}
      dimensions={{ width: 250, height: 250 }}
      fill="purple"
      stroke="transparent"
    />
  </Canvas>
)
```

> You can also compose shapes

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

const App = () => (
  <Canvas fill="blue">
    <Rectangle
      position={{ x: 100, y: 100 }}
      dimensions={{ width: 250, height: 250 }}
      fill="purple"
      stroke="transparent"
    >
      <Text text="hallo" fill="white" size={20} />
    </Rectangle>
  </Canvas>
)
```

### MouseEvents: draggable `<Rectangle/>`

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

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

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

> 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 = () => (
  <Canvas>
    <Rectangle
      position={{ x: 100, y: 100 }}
      dimensions={{ width: 50, height: 50 }}
      controllers{[Drag()]}
    />
  </Canvas>
)
```

### `<Group/>` and Clip

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

const App = () => (
  <Canvas>
    <Group
      position={{ x: 100, y: 100 }}
      clip={() => (
        <>
          <Rectangle
            position={{ x: 0, y: 0 }}
            dimensions={{ width: 100, height: 50 }}
          />
          <Rectangle
            position={{ x: 0, y: 0 }}
            dimensions={{ width: 50, height: 100 }}
          />
        </>
      )}
      fill="blue"
    >
      <Text text="hallo" size={50} />
    </Group>
  </Canvas>
)
```

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

## Lines: `<Line/>`, `<Bezier/>` and `<Quadratic/>`

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

const App = () => (
  <Canvas draggable>
    <Line
      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 },
      ]}
    />
    <Bezier
      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 } },
      ]}
    />
    <Quadratic
      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>
)
```

## Canvas API-Coverage

- [x] Object2D
  - [x] `<Group/>`
  - [x] Shape2D
    - [x] `<Text/>`
    - [x] `<Image/>`
    - [x] Path2D
      - [x] `<Rectangle/>`
      - [x] `<Line/>`
      - [x] `<Arc/>`
      - [x] `<Bezier/>`
      - [x] `<Quadratic/>`
- [ ] Compositing
  - [ ] `<Group/>` (to 'properly' composite groups we should render to offscreencanvas first)
  - [x] Shape2D
- [ ] Clipping
  - [ ] `<Group/>`
  - [ ] Shape2D (Shape2D inherits from `Group`)
- [x] Color (for fill/stroke)
  - [x] `<Gradient/>`
  - [x] `<Pattern/>`

## Additional API

- [ ] `Path` component
  - [x] accepts an svg path constructed with utility-functions from `solid-canvas/d` [example](https://github.com/bigmistqke/solid-canvas/blob/main/dev/pages/Path.tsx)
  - [ ] 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` with "&:hover" selector 👉 `"&:hover`: Shape2DStyles`
- [ ] Transitions for `Shape2D`: automatic lerping between styles/transforms
- [ ] Navigation
  - [x] Pan (draggable-prop in `Canvas`)
  - [ ] Zoom
- [x] Controller-prop: callback which can control the props
- [ ] Handles-controller
  - [x] Pan (draggable-prop in `Canvas`)
  - [ ] Zoom
- [x] Controllers-prop: transform props through a series of composable controller-functions
- [ ] CurveHandles-controller: edit points of `Path2D`
  - [x] `Line`
  - [x] `Bezier`
  - [x] `Quadratic`
  - [ ] `Rectangle`
  - [ ] `Arc`
- [ ] TransformHandles-controller: edit transform (position, rotation, scale and skew) of `Object2D`
- [ ] Nestable `<Canvas/>` 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](https://stackoverflow.com/a/25531787/4366929)
- [ ] Caching `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

solid-canvas

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README