react-canvas-drawing

React Drawing Canvas

You can install the module via npm:

npm install react-canvas-drawing --save

Usage

There are two ways of using this package

• Drawing on React Canvas Component
• Drawing on Existing Html Canvas by passing a reference

import React,  { useEffect, useRef, useState } from "react";
import { ReactCanvas, Canvas } from 'react-canvas-drawing';
 
const App = () =>{
   const canvas = useRef(null);
    const [settings, setsettings] = useState({
        shape: 'line', // line, circle, rect
        fillColor: '#4c5685',
        lineWidth: 5,
        canvasFillColor:'#fff'
    });
    const [clearFlag, setclearFlag] = useState(false)
    const [canvasInstance, setcanvasInstance] = useState(false)

    useEffect(() => {
        let canvasObj = new Canvas({
            canvas: canvas.current,
            onDrawActionEnd: onDrawActionEnd,
            onClear: onClear
        })
        setcanvasInstance(canvasObj)
    }, [])

    const clearCanvas = ()=>{
        canvasInstance.clearCanvas()
    }

    const onDrawActionEnd = () =>{
        setsettings(obj=>{
            return {...obj, shape: null}
        })
    }

    const onClear = () =>{
        setclearFlag(false)
    }

    useEffect(() => {
        if(canvasInstance){
            canvasInstance.settingsListener(settings)
        }
    }, [settings])

  return(
    <>
      <select onChange={(e)=>{
            setsettings(obj=>{
                return {...obj, shape: e.target.value}
            })
          
        }}>
            <option>line</option>
            <option>circle</option>
            <option>rect</option>
        </select>

        <input id='fillColor' type='color' step='1' 
            value={settings.fillColor} 
            onChange={(e)=>{
                setsettings(obj=>{
                    return {...obj, fillColor: e.target.value}
                })
            }}></input>

        <input type="range" min="1" max="100" value={settings.lineWidth} 
            class="slider" 
            id="myRange"
          onChange={(e)=>{
            setsettings(obj=>{
                return {...obj, lineWidth: e.target.value}
            })
        }}/>

        <button onClick={()=>{
            setclearFlag(true)
            clearCanvas()
        }}>Clear</button>

// Using React Canvas Component----
        <ReactCanvas 
          width={800} 
          height={1200} 
          canvasStyle={{border:'1px solid grey'}} 
          settings={{
            shape: 'line', // line, circle, rect
            fillColor: '#4c5685',
            lineWidth: 5,
            canvasFillColor:'#fff'
          }}
          onDrawActionEnd={onDrawActionEnd}
          clearFlag={clearFlag} //boolean
          onClear={onClear}
      />

// Using HTML Canvas --------
      <canvas ref={canvas} id="react-canvas" width={500} height={800} style={{border:'1px solid grey'}}/>
      </>
    />
  )
}
export default App;

Props

Name	Type	Default
height	integer	undefined
width	integer	undefined
canvasStyle	style Object	undefined
settings	Object	-
settings properties - shape	enum	default - 'line', values - 'line', 'circle', 'rect'
settings properties - fillColor	string	'#4c5685'
settings properties - lineWidth	integer	5
settings properties - canvasFillColor	string	'#fff'
clearFlag	Boolean	false
onClear	Function	undefined
id	string	'react-canvas'