React-Canva

(Project in development)

Demo/Sandbox

React-Canva is a JavaScript library for drawing complex canvas graphics using React.

This is not another renderer for React as React Konva. You can use this library together with DOM (as opposed to React Konva). This library takes control of the canvas in the usual form for React.

Installation

npm install react-canva --save

Example

import React from "react";
import {render} from "react-dom";
import {Canvas, Text, Rect, Arc, Line} from "react-canva";

const App = () => {
    return (
        <div>
            <Canvas>
                <Rect x={10}
                      y={10}
                      width={200}
                      height={200}
                      fill="#030303"
                      stroke="red"/>
                <Text text={"React-Canva"}
                      font={"48px serif"}
                      x={100}
                      y={100}
                      stroke={"cyan"}
                      fill={"white"}
                      onClick={onClick}/>
                <Line x1={10}
                      y1={10}
                      x2={20}
                      y2={30}
                      onClick={onClick}/>
                <Arc x={10}
                     y={10}
                     radius={50}
                     startAngle={0}
                     endAngle={180}
                     stroke={"cyan"}
                     fill={"white"}
                     onClick={onClick}
                     lineCap="butt"
                     lineDashOffset={0.0}
                     lineJoin="miter"
                     lineWidth={1.0}
                     miterLimit={10.0}/>
            </Canvas>
        </div>
    );
}

render(<App/>, document.getElementById('root'));

Core API

Supported Events

• onClick
• onContextMenu
• onDoubleClick
• onMouseDown
• onMouseUp
• onPointerDown

Base Props

export interface BaseProps {
    stroke?: string;
    fill?: string;
    lineCap?: CanvasLineCap;
    lineDashOffset?: number;
    lineJoin?: CanvasLineJoin;
    lineWidth?: number;
    miterLimit?: number;
}

Rect

export interface RectProps extends BaseProps {
    x: number;
    y: number;
    width: number;
    height: number;
}

Arc

export interface ArcProps extends BaseProps {
    x: number;
    y: number;
    radius: number;
    startAngle: number;
    endAngle: number;
    anticlockwise?: boolean;
}

Line

export interface LineProps extends BaseProps {
    x1: number;
    y1: number;
    x2: number;
    y2: number;
}

Text

export interface TextProps extends BaseProps {
    x: number;
    y: number;
    text: string;
    font: string;
}