react-canvas-next

A lightweight React-based Canvas drawing library. This library provides some basic shape components, such as Path and BezierCurve. And, some components have Svg-like properties. For example, the d property of the Path component is the same as the d property of the Svg path, and the viewBox property of the Canvas component is similar to the viewBox property of Svg.

Basic usage

1<Canvas height={400} width={600} >
2  <Rect
3    fill="red"
4    height={80}
5    width={120}
6    x={20}
7    y={20}
8  />
9  <Rect
10    fill="steelblue"
11    height={80}
12    width={120}
13    x={160}
14    y={20}
15  />
16  <Group
17    fill="darkgoldenrod"
18    lineWidth={4}
19    stroke="deeppink"
20  >
21    <Rect
22      height={25}
23      width={25}
24    />
25    <Rect
26      height={25}
27      width={25}
28      x={30}
29    />
30    <Rect
31      fill="yellow"
32      height={25}
33      width={25}
34      x={10}
35      y={10}
36    />
37  </Group>
38  <Circle
39    cX={360}
40    cY={60}
41    fill="green"
42    lineWidth={0}
43    r={40}
44  />
45  <Text
46    fill="yellow"
47    font="80px seril"
48    text="Nice Work"
49    textBaseline="top"
50    x={200}
51    y={200}
52  />
53</Canvas>

Components

Canvas

Canvas with viewBox

1<Canvas width={400} height={400} viewBox={[0, 0, 800, 800]} style={{ border: '1px solid red' }}>
2  <Rect x={200} y={200} width={400} height={400} fill='steelblue' />
3  <Circle cX={400} cY={400} r={150} fill='white' />
4</Canvas>

Line

1<Line
2  stroke='steelblue'
3  lineWidth={5}
4  start={[30, 50]}
5  end={[150, 100]}
6  // `start` and `end` also can use follow props
7  // x={30}
8  // y={50}
9  // endX={150}
10  // endY={100}
11/>

Polygon

1<Polygon
2  fill='steelblue'
3  points={[
4    100, 100, // x1, y1
5    150, 25,  // x2, y2
6    150, 75,  // x3, y3
7    200, 0,   // x4, y4
8    // ...
9  ]}
10/>

Rect

1<Rect
2  start={[10, 20]}  // x={10} y={20}
3  size={[150, 100]} // width={150} height={100}
4  fill='steelblue'
5/>

Arc

1<Arc
2  center={[200, 100]} // cX={200} cY={100}
3  r={50}
4  startAngle={0} // in radians, measured from the positive x-axis
5  endAngle={5}   // in radians, measured from the positive x-axis
6  fill='steelblue'
7/>

Circle

1<Circle
2  center={[200, 150]} // cX={200} cY={150}
3  fill="steelblue"
4  r={50} // radius
5/>

Ellipse

1<Ellipse
2  center={[200, 150]} // cX={200} cY={150}
3  radius={[150, 80]}  // rX={150} rY={80} // The ellipse's radius
4  rotation={Math.PI / 4}
5  startAngle={0}
6  endAngle={1.6 * Math.PI}
7  fill='palegoldenrod'
8/>

ArcCurve

1<ArcCurve
2  start={[200, 20]}      // x={200} y={20}
3  control1={[200, 130]}  // cp1X={200} cp1Y={130}
4  control2={[50, 20]}    // cp2X={50} cp2Y={20}
5  r={40}  // radius
6  stroke='darkcyan'
7/>

BezierCurve

1<BezierCurve
2  start={[50, 20]}      // starting point, same as x={50} y={20}
3  control1={[230, 30]}  // first control point, same as cp1X={230} cp1Y={30}
4  control2={[150, 80]}  // second control point, same as cp2X={150} cp2Y={80} 
5  end={[250, 100]}      // endX={250} endY={100}
6  fill='transparent'
7  stroke='steelblue'
8  lineWidth={2}
9/>

QuadraticCurve

1<QuadraticCurve
2  start={[50, 20]}     // x={50} y={20}
3  control={[230, 30]}  // cpX={230} cpY={30}
4  end={[50, 100]}      // endX={50} endY={100}
5  stroke='steelblue'
6/>

Path

Use attribute d to control, the same as svg

1<Path
2  fill='red'
3  stroke='steelblue' // stroke color
4  lineWidth={2}      // stroke width
5  d={`
6    M 10,30
7    A 20,20 0,0,1 50,30
8    A 20,20 0,0,1 90,30
9    Q 90,60 50,90
10    Q 10,60 10,30 z
11  `}
12/>

Image

1<Image
2  src='/mk-logo.png'
3  // area on image
4  source={{
5    x: 256,
6    y: 256,
7    height: 512,
8    width: 512
9  }}
10  // drawn area
11  dest={{
12    x: 20,
13    y: 20,
14    width: 200
15  }}
16/>

Text

1<Text
2  text='Hello World'
3  font='48px serif'
4  fill='#4884b6'
5  stroke='#c8ca42'
6  textBaseLine='top'
7  x={20}
8  y={10}
9/>

Group

1<Group
2  fill="darkgoldenrod" // Default `fill` for children
3  lineWidth={4}        // Default `lineWidth` for children
4  stroke="deeppink"    // Default `stroke` for children
5  transform={[translate(160, 40), rotate(Math.PI / 180 * 30)]} // transforms
6>
7  <Rect
8    height={25}
9    width={25}
10  />
11  <Rect
12    height={25}
13    width={25}
14    x={30}
15  />
16  <Rect
17    fill="yellow"
18    height={25}
19    width={25}
20    x={10}
21    y={10}
22  />
23</Group>

To-Do

• Event system
• Animation