react-drawing

React component for drawing on canvas with possibility to pan and zoom from library @sasza/react-panzoom.

Demo

https://codesandbox.io/s/crazy-wildflower-i23nbu - toolbox example

https://codesandbox.io/s/romantic-tesla-oqdmx - above example

https://codesandbox.io/s/strange-cerf-r4txf - example with pan and zoom

https://codesandbox.io/s/quirky-wilbur-ejfjm - example with custom brush color

https://codesandbox.io/s/angry-architecture-ucue3 - example with drawing text

Installation

npm install react-drawing

Usage

Example from GIF above:

import Drawing, { brushFromSrc } from 'react-drawing'

// ...

<Drawing
  brush={brushFromSrc('smile.png',{ width: 30, height: 30 })}
/>

Properties

| Name | Default | Description | | --- | --- | --- | | brush | brushArc | Brush for drawing | | height | 300 | canvas height in px | | fps | 30 | drawing interval time | | width | 300 | canvas width in px | | containerWidth | width | width of canvas container | | containerHeight | height | height of canvas container |

Brush

brushArc({ fillStyle = 'black', size = 10 })

Brush on canvas with arc.

brushFromSrc(src, { width, height })

Brush on canvas with specified image. Could be also base64.

brushText({
  fillStyle = 'black', font = 'Arial', text, size = 10,
})

Brush on canvas with text.

brushRect({ fillStyle = 'black', lineWidth = 5, width, height })

Brush on canvas with rect.

brushPanZoom()

Pan and zoom on canvas.

brushCustom({ draw, init })

Brush custom on canvas context:

import Drawing, { brushCustom } from 'react-drawing'

// ...

<Drawing
  brush={brushCustom({
    init: (ctx) => {
      ctx.fillStyle = fillStyle // red
    },
    draw: (ctx, x, y) => {
      ctx.beginPath()
      ctx.moveTo(x,y)
      ctx.lineTo(x + 25,y + 25)
      ctx.lineTo(x + 25, y - 25)
      ctx.fill()
    },
    dependencies: [fillStyle],
  })}
  height={200}
  width={400}
/>

init() method is executed only once, so it's a good place for setting color, line width, stroke-dasharray etc. dependencies[] array to reinit on change.

API

| Name | Description | | --- | --- | | brush(x, y) | brush on x, y position of canvas | | getCanvas() | get canvas node | | getContext() | get context 2d of canvas | | toDataURL() | canvas to data URI |

Usage:

const ref = useRef()
//...
<Drawing ref={drawingRef} />

Testing

npm run test

Examples

npm run storybook