How to Draw Shapes in React

An Introduction to React Konva

If you want to draw shapes on a web page, normally the solution is pretty simple: Just use HTML Canvas. It’s a built-in functionality with plenty of documentation and tutorials — basically everything you could ask for.

Unfortunately, it doesn’t play well with React.

To program graphics with Canvas, you need to be able to access and manipulate the canvas element — one of the rare things that are easier in vanilla JavaScript than in React.

That’s not to say it’s impossible to use Canvas directly with React. It’s very much doable. But there’s an easier way, in the form of the react-konva library.

Konva is a JavaScript library for drawing with Canvas; react-konva extends that functionality to React. But while Konva has tons of documentation, react-konva’s docs are a little more barebones.

So here’s how to get started with react-konva and draw some basic shapes.

If you’ve read this far, I’m going to assume you know how to use create-react-app to get your React project up and running (if not, there are plenty of tutorials out there).

Then, install the react-konva and konva libraries by running npm install react-konva konva --save in your terminal.

Within the file where you want to create your drawing, add import { Stage, Layer, Line } from ‘react-konva’; to the top.

No matter what you’re drawing, you’ll almost always need to import Stage and Layer.

Stage is sort of what it sounds like: It’s the component where you set up everything to make your drawing.

The Layer components live within the stage, and you can add as many as you’d like. Each Layer component holds shape components.

Layers are important for things like moving objects around and which shapes are in the foreground. For this basic tutorial, though, we’ll only be using one layer within our stage.

We’re importing Line here because we’ll be using it to create some triangles, but you should import whatever best suits your purposes (options include Circle, Rect, Text, RegularPolygon, and many others).

Our goal here is to draw a right triangle. If we wanted an equilateral triangle instead, we could use RegularPolygon, which is a simple way to draw shapes … as long as those shapes have equal sides and angles. A right triangle doesn’t, so we’ll be using the Line component for that.

We’ll start by defining the functional component that will create our triangle:

export const rightTriangle = () => {
  return(
    null
  );
};

Of course, right now this doesn’t return anything. So let’s replace that null with a stage that will hold our layer, and ultimately our shape.

export const rightTriangle = () => {
  return(
    <Stage width={100} height={100}>
    </Stage>
  );
};

The width and height props set the size of the stage — in this case, 100 pixels each. You can customize this however you’d like.

Next, let’s create a layer within the stage:

export const rightTriangle = () => {
  return(
    <Stage width={100} height={100}>
      <Layer>
      </Layer>
    </Stage>
  );
};

Now for the shape itself. The Line component is incredibly powerful for creating all kinds of polygonal shapes — all you have to do is tell it the coordinates of each point within the shape. Keep in mind, though, that the origin is at the top left, and positive y coordinates move down from there. So if we want the first corner of our triangle to be at the bottom left, we’ll need to give Line the coordinates [0, 100].

The next coordinate, at the bottom right, would be [100, 100]. Finally, the third coordinate that makes up our triangle, at the top left, would be [0, 0]. We’ll also need to pass the closed prop so react-konva knows we’re trying to draw a closed shape rather than just a crooked line. We’ll also want to give it a fill color so we can actually see the shape.

export const rightTriangle = () => {
  return(
    <Stage width={100} height={100}>
      <Layer>
        <Line closed points={[0, 100, 100, 100, 0, 0]} fill="red" />
      </Layer>
    </Stage>
  );
};

From there, we can add all kinds of other props. For example, stroke="black" strokeWidth={1} will give it a black border that’s one pixel wide.

For a more thorough overview of the available options, you can check out the docs for the regular JavaScript version of Konva — just keep in mind that anything listed as an object property for regular JavaScript should instead be passed as a prop in React.

Now go forth and make beautiful graphics in React!