Techniques for Animating on the Canvas in React
Since the React framework is all about developing dynamic UIs, we figured you can't get more dynamic than creating aminations!
Join the DZone community and get the full member experience.Join For Free
I recently experimented with audio visualization 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.
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.
Once you've set it up this way, you can then refer to the canvas element through the ref's
current property, for example in
Now you have the context you can draw and animate all you like.
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.
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.
Don't forget to implement
componentWillUnmount to stop the
requestAnimationFrame loop too.
You can see this in action in this pen.
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
shouldComponentUpdate will let React know that this component doesn't need to change. However, if we're using the pattern above, returning
shouldComponentUpdate will skip running
componentDidUpdate and that's responsible for our drawing.
I eventually came across this answer from Dan Abramov to a question on StackOverflow. We can create a
PureCanvas component that implements
shouldComponentUpdate and returns
false and use a callback ref to get the reference to the canvas element in a parent
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.
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
Even though it is not necessary, I find this separation between animation, drawing and rendering the canvas element itself quite pleasing. You can see this example in action on CodePen too.
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.
If you're interested in other animations in React, do please check out my article on audio visualization in React.
Published at DZone with permission of Phil Nash, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.