Techniques for animating on the canvas in React

I recently experimented with audio visualisation in React on the Twilio blog. While I meant to teach myself more about the web audio API I found that I picked up a few techniques for animating in canvas within a React project. If you’re creating a canvas animation in React then perhaps this will help you too.

Good references

First up, if you’ve used React before you’ll know that you’re supposed to avoid touching the DOM and let React handle it. If you’ve worked with an HTML5 <canvas> before, you’ll also know that to get a context with which to draw on the canvas, you need to call directly on the canvas element itself. Thankfully this is an edge case that React supports through refs.

To get a ref to a canvas element inside a React component you first need to create the ref in the constructor using React.createRef. When you come to render the canvas element, add a prop called ref that points to the ref you created.

Separating animation and drawing

A lot of building with React is about maintaining the state of the view. The first time I animated something on a canvas in React I held the state and the code to draw it in the same component. After browsing examples online, I came across this rotating square on CodePen. What I really liked about this example was the way the state was separated from the drawing with the use of two components. The state of the drawing was then passed from the animating component to the drawing component through props.

I recreated the original to show the separation.

First you define a Canvas component that draws an image using the props as parameters.

classCanvasextendsReact.Component{constructor(props){super(props);this.canvasRef=React.createRef();}componentDidUpdate(){// Draws a square in the middle of the canvas rotated// around the centre by this.props.angleconst{angle}=this.props;constcanvas=this.canvasRef.current;constctx=canvas.getContext('2d');constwidth=canvas.width;constheight=canvas.height;ctx.save();ctx.beginPath();ctx.clearRect(0,0,width,height);ctx.translate(width/2,height/2);ctx.rotate((angle*Math.PI)/180);ctx.fillStyle='#4397AC';ctx.fillRect(-width/4,-height/4,width/2,height/2);ctx.restore();}render(){return<canvaswidth="300"height="300"ref={this.canvasRef}/>;}}

Then you create an Animation component that runs an animation loop using requestAnimationFrame. Each time the animation loop runs you update the parameters of the animation in the state and let React render the Canvas with the updated props.

Rerendering

A concern when animating or doing other intensive visual updates in React is rerendering child elements too often, causing jank. When we are drawing on the canvas we never want the canvas element itself to be rerendered. So what’s the best way to hint to React that we don’t want that to happen?

You might be thinking of the shouldComponentUpdate lifecycle method. Returning false from shouldComponentUpdate will let React know that this component doesn’t need to change. However, if we’re using the pattern above, returning false from shouldComponentUpdate will skip running componentDidUpdate and that’s responsible for our drawing.

Note: in Dan’s answer he says that using the pattern above should be ok and the following technique is likely only necessary if you have profiled your application and found it makes a difference.

Updating the example above, we split the Canvas component into a Canvas and a PureCanvas. First, the PureCanvas uses a callback ref and a callback provided through the props to return the canvas context to the parent component. It also renders the canvas element itself.

Then the Canvas component passes a callback function, saveContext, as the contextRef prop when rendering the PureCanvas. When the function is called we save the context (and cache the canvas element’s width and height). The rest of the differences from before are turning references to ctx to this.ctx.

Canvas vs React

It’s been an interesting journey working with a canvas element within React. The way they work feels very different to each other, so getting them in sync wasn’t necessarily straightforward. Hopefully if you have this problem then these techniques can help you.