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;
}

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
dist		dist
docs		docs
src		src
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmignore		.npmignore
README.MD		README.MD
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.json		tsconfig.json

GoldenFishe/react-canva

Folders and files

Latest commit

History

Repository files navigation