oh-my-canvas

Omc is a React like web framework for Canvas 2D render component

Install

npm i oh-my-canvas

Usage

import omc, { Component, render, Group } from '../src'

import { Tween, Easing } from 'wacaca'

class Rect extends Component {
  pointCollision({ offsetX, offsetY }) {
    return this.context.isPointInPath(this.path, offsetX, offsetY)
  }

  render() {
    const { x, y, width, height, fillColor } = this.props
    const path = new Path2D()
    this.context.fillStyle = fillColor || '#000'
    path.rect(x, y, width, height)
    this.context.fill(path)
    this.path = path
  }
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      x: 10,
      y: 10,
      width: 100,
      height: 100,
      fillColor: 'red'
    }
  }

  render(p) {
    const {
      x,
      y,
      width,
      height,
      fillColor,
    } = this.state

    return (
      <Group>
        <Rect
          key={0}
          x={x}
          y={y}
          width={width}
          height={height}
          fillColor={fillColor}
          onClick={() => {
            new Tween(this.state.x)
              .to(this.state.x + 200)
              .easing(Easing.bounceInOut)
              .duration(2000)
              .onUpdate(x => (this.state.x = x))
              .start()
          }}
          onMouseenter={() => (this.state.fillColor = 'yellow')}
          onMouseleave={() => (this.state.fillColor = 'red')}
        />
      </Group>
    )
  }
}

render(<App />, '#app')

The output would be like:

LICENSE

MIT