I recently experimented with . 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. audio visualisation in React on the Twilio blog 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 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 . <canvas> 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 . When you come to render the canvas element, add a prop called that points to the ref you created. React.createRef ref class Animation extends React.Component {  constructor(props) {    super(props);    this.canvasRef = React.createRef();  }  render() {    return (      <div>        <canvas ref={this.canvasRef} />      </div>    );  }} Once you’ve set it up this way, you can then refer to the canvas element through the ref’s property, for example in : current componentDidMount componentDidMount() {    const canvas = this.canvasRef.current;    const context = canvas.getContext('2d');    context.fillRect(0, 0, canvas.width, canvas.height);  } 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 . 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. this rotating square on CodePen I recreated the original to show the separation. First you define a component that draws an image using the props as parameters. Canvas class Canvas extends React.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.angle    const { angle } = this.props;    const canvas = this.canvasRef.current;    const ctx = canvas.getContext('2d');    const width = canvas.width;    const height = 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 <canvas width="300" height="300" ref={this.canvasRef} />;  }} Then you create an component that runs an animation loop using . Each time the animation loop runs you update the parameters of the animation in the state and let React render the with the updated props. Animation [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) Canvas Don’t forget to implement to stop the loop too. componentWillUnmount requestAnimationFrame class Animation extends React.Component {  constructor(props) {    super(props);    this.state = { angle: 0 };    this.updateAnimationState = this.updateAnimationState.bind(this);  }  componentDidMount() {    this.rAF = requestAnimationFrame(this.updateAnimationState);  }  updateAnimationState() {    this.setState(prevState => ({ angle: prevState.angle + 1 }));    this.rAF = requestAnimationFrame(this.updateAnimationState);  }  componentWillUnmount() {    cancelAnimationFrame(this.rAF);  }  render() {    return <Canvas angle={this.state.angle} />;  }} You can see . this in action in this pen Rerendering A concern when animating or doing other intensive visual updates in React is rerendering child elements too often, causing . 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? jank You might be thinking of the lifecycle method. Returning from will let React know that this component doesn’t need to change. However, if we’re using the pattern above, returning from will skip running and that’s responsible for our drawing. [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) false shouldComponentUpdate false shouldComponentUpdate componentDidUpdate I eventually came across . We can create a component that implements and returns and use a to get the reference to the canvas element in a parent component. this answer from Dan Abramov to a question on StackOverflow PureCanvas shouldComponentUpdate false callback ref Canvas 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 component into a and a . First, the 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 Canvas PureCanvas PureCanvas class PureCanvas extends React.Component {  shouldComponentUpdate() {    return false;  }  render() {    return (      <canvas        width="300"        height="300"        ref={node =>          node ? this.props.contextRef(node.getContext('2d')) : null        }      />    );  }} Then the component passes a callback function, , as the prop when rendering the . 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 to . Canvas saveContext contextRef PureCanvas ctx this.ctx class Canvas extends React.Component {  constructor(props) {    super(props);    this.saveContext = this.saveContext.bind(this);  }  saveContext(ctx) {    this.ctx = ctx;    this.width = this.ctx.canvas.width;    this.height = this.ctx.canvas.height;  }  componentDidUpdate() {    const { angle } = this.props;    this.ctx.save();    this.ctx.beginPath();    this.ctx.clearRect(0, 0, this.width, this.height);    this.ctx.translate(this.width / 2, this.height / 2);    this.ctx.rotate((angle * Math.PI) / 180);    this.ctx.fillStyle = '#4397AC';    this.ctx.fillRect(      -this.width / 4,      -this.height / 4,      this.width / 2,      this.height / 2    );    this.ctx.restore();  }  render() {    return <PureCanvas contextRef={this.saveContext} />;  }} 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 visualisation in React If you have another way of working with canvas in React I’d love to hear. Drop me a note on Twitter at . @philnash Originally published at philna.sh on September 27, 2018.

CodePen

Mozilla

Super

Twitter

How to start a Node.js project

Follow @philnash on Twitter

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Techniques for animating on the canvas in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Build a Chat App with Twilio and KendoReact

Canvas And React: A Simple Guide To Data Charts

Custom Progress Bar with Jetpack Compose Canvas API: Tutorial

How to Get Base64 Encoded Data from an HTML Image Element in JavaScript

JavaScript: Do you like games? (part 1)

Build a Chat App with Twilio and KendoReact

Canvas And React: A Simple Guide To Data Charts

Custom Progress Bar with Jetpack Compose Canvas API: Tutorial

How to Get Base64 Encoded Data from an HTML Image Element in JavaScript

JavaScript: Do you like games? (part 1)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps