The HTML5 Canvas is a powerful tool for embedding performant, interactive graphics in web apps. It has broad browser support and built-in APIs for drawing shapes, images and text. There are also a number of helper libraries built on top of Canvas like Konva that help with event handling and animations.
However, the Canvas API is entirely imperative. It uses methods like ctx.fillRect(10, 10, 100, 100) and ctx.fillStyle = ‘green’ which, to a React developer spoiled by the magic of reactive DOM, feel rather old fashioned. It’s easy to see complexity growing quickly when building complicated illustrations.
react-konva is a library for creating Canvas illustrations using React. It is built as a React wrapper over the Konva Canvas library, letting you interact with the Konva API through React component interfaces.
Let’s jump into the code to get a feel for how it works.
Don’t worry too much about Stage and Layer here, they’re the basic building blocks of a Konva layout. The important part is the <Rect /> component. With react-konva shapes are represented as components. You use props to describe the color, size, and other attributes of each shape. When props change, react-konva updates the underlying canvas graphics. It’s just like working with DOM nodes, except elements are rendered to a Canvas!
react-konva supports an event handling API similar to that in the DOM. You can attach handlers to shapes for clicks, drags, and other interaction events. It has built-in components for a host of figures like Circle, Ellipse, Wedge, Line, Arrow, RegularPolygon, and many more. You can also use pre-built components for rendering images and text to the canvas.
One of the reasons to use Canvas is that you can draw thousands of objects without incurring a memory penalty, since when you “draw” something, it doesn’t create an actual object in memory, but simply changes pixels on the canvas. This is a limitation of react-konva, since the library creates React components to manage the lifecycle of each shape. If you draw hundreds of shapes on a canvas, there is a similar memory overhead to creating many DOM nodes in React. As such, react-konva is not well suited to applications where you need to render a very large number of elements to a canvas.
If you need to do this, you can use the Konva API directly (without the React wrapper) like this:
Here, I built a simple demo in JSBin so you can get a feel for using react-konva. Try changing the parameters of the <Star /> or add other shapes/interactions to the illustration.
JS Bin
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more…
GitHub – konvajs/react-konva: React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React. – konvajs/react-konva
HTML5 canvas Rect Tutorial
To create a rectangle with Konva, we can instantiate a Konva.Rect() object. For a full list of attributes and methods, check out the Konva.Rect documentation. You can define corner radius for Konva.Re
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
POST requests: Handling errors, authentication, & best practicesLearn about the Axios POST method and discover how to deploy it in vanilla JavaScript and frameworks like React.
Explore htmx, a small browser-oriented JavaScript library aimed at building no-nonsense, server-driven web apps.
Compare nine alternatives to the Create React app, and learn how they can help you build modern React applications more efficiently.
Explore underrated JavaScript APIs like `structuredClone` and `AbortController` that let you build dynamic, performant, and user-friendly apps.
