Techniques for Animating on the Canvas in React

See the original posting on DZone Python

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.

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.