The first time I tried using HTML5 Canvas was in a React app. Being fairly new to React, and completely new to Canvas, it took me a little while to figure things out and get started. I stumbled my way through it, but ended up making something pretty cool.

In this blog post, we’ll create a simple React component that utilizes HTML5 Canvas. If you’re unfamiliar with <canvas> , it’s an HTML element that is used to draw graphics on a web page. The element is only a container for the graphics; we use Javascript to actually “draw” the graphics onto the canvas.

By the end of this post, we’ll have a web page that looks like this:

Our goal

Let’s get started!

Start with some JSX

First we need our <canvas> and <img> elements.

class Canvas extends React.Component { render() {

return(

<div>

<canvas ref="canvas" width={640} height={425} />

<img ref="image" src={cheese} className="hidden" />

</div>

)

}

} export default Canvas

A couple things to note:

Both elements have a ref attribute. This is how we’ll access the elements later on. (If we were using plain Javascript, we could do something like document.getElementById(“canvas”) . Since we’re using React, we need another way to access the elements.)

attribute. This is how we’ll access the elements later on. (If we were using plain Javascript, we could do something like . Since we’re using React, we need another way to access the elements.) The only reason we have an <img> element is so that we can later use it on the canvas. We don’t want the <img> element to be visible, so I’m using display: none; to hide it.

Some prep before we draw

Once our component mounts, we need to do a few things before we can start drawing.

class Canvas extends React.Component { componentDidMount() {

const canvas = this.refs.canvas

const ctx = canvas.getContext("2d")

const img = this.refs.image

} render() {

return(

<div>

<canvas ref="canvas" width={640} height={425} />

<img ref="image" src={cheese} className="hidden" />

</div>

)

}

} export default Canvas

Let’s walk through those new lines of code:

const canvas = this.refs.canvas

Here we are simply finding the <canvas> element and saving it to a variable.

Here we are simply finding the element and saving it to a variable. const ctx = canvas.getContext("2d")

Here we are creating a drawing object for our canvas and saving it to a variable. This drawing object is what we’ll actually be drawing on.

Here we are creating a drawing object for our canvas and saving it to a variable. This drawing object is what we’ll actually be drawing on. const img = this.refs.img

Here we are finding the <img> element and saving it to a variable.

Time to draw!

It’s the moment you’ve been waiting for. Let’s draw!

class Canvas extends React.Component { componentDidMount() {

const canvas = this.refs.canvas

const ctx = canvas.getContext("2d")

const img = this.refs.image img.onload = () => {

ctx.drawImage(img, 0, 0)

ctx.font = "40px Courier"

ctx.fillText(this.props.text, 210, 75)

}

} render() {

return(

<div>

<canvas ref="canvas" width={640} height={425} />

<img ref="image" src={cheese} className="hidden" />

</div>

)

}

} export default Canvas

Let’s break it down:

img.onload = () => {…}

Here we use the onload event to wait and start drawing after the <img> element has finished loading.

Here we use the onload event to wait and start drawing after the element has finished loading. ctx.drawImage(img, 0, 0)

Here we use the drawImage(image,x,y) method to draw our image starting at the top left corner of the canvas.

Here we use the method to draw our image starting at the top left corner of the canvas. ctx.font = “40px Courier”

Here we are setting the font properties for the text we are about to draw.

Here we are setting the font properties for the text we are about to draw. ctx.fillText(this.props.text, 210, 75)

Here we are using the fillText(text,x,y) method to draw our text. (As you can see, we’re getting our text from the props that were passed down from the parent component. In this example, this.props.text is “Brie Mine” .)

Admire our work

That’s it! We’ve now got a beautiful graphic that we drew onto the web page using Canvas.

The final product

Bonus: Let’s save it

If you think about it, we could have written some HTML and CSS to create something that looks like this. Why use Canvas? With Canvas, we have one flattened graphic. It’s not multiple elements displayed on top of each other, like it would be if we just used HTML and CSS. Since it’s one thing, we never have to worry about it looking any different than it does right now. And -this part is pretty exciting- there’s a way to save this graphic to be used later.

Once we’re done drawing our canvas, we can use the toDataURL() method to turn our graphic into a data URL.

const dataURL = canvas.toDataURL()

The result is a 64 bit encoded PNG URL. Say what? Pretty much it’s a really long string that is a representation of the image. You can save this string in a database. Then later, when you want to display the image on a web page, the string becomes the src of your <img> element.

For example, let’s say we just retrieved this long data URL string from a database or wherever and saved it in a variable called image . The JSX to display the image would be:

<img src={image} />

That’s it! We now have an image on the page that looks just like the canvas.