Getting Started with the Canvas Element
And making basic graphics with JavaScript within this magical rectangle
For my Phase 4 project at bootcamp, I wanted to make a drawing app, but had no idea where to start. Since it was going to be built with a React/JS frontend, I focused on looking at packages since it seemed like flashy and complicated functionality. Little did I know what I’d actually end up taking advantage of was a humble HTML element, canvas.
This element is not unlike a painting canvas — it creates a drawable section in an HTML document where you can use JavaScript to create graphics and animations through the Canvas API or WebGL API.
To create a canvas element, all you need to do is supply height and width attributes. Just starts with making a rectangle! It’d also be ideal to include an id for ease of finding the element on the DOM or styling it later. Once this element is made, you can use JS to add things like shapes, colors, lines, and text.
Let’s take a look by trying to draw the Japanese flag 🇯🇵, a white flag with a red circle in the center. We’ll make the canvas element the entirety of the flag itself, and add a border with CSS.
<!-- HTML file: -->
<canvas id="test-canvas-1" width="300" height="200">
</canvas>---/* CSS file: */
canvas#test-canvas-1 {
border: 1px solid black;
}
At this point we just have a rectangle with a black border.
We could do other things to make the red circle (like CSS) or the flag (including just inserting an image of the flag…) but for demo purposes, let’s see this canvas get used!
The first thing we have to do in JavaScript is nab that canvas element from the DOM. (I wrote a little primer in DOM manipulation a little while ago if you need a refresher!) After that, we’ll grab the drawing context for the canvas.
var canvasEl = document.getElementById("test-canvas-1")
var canvasContext = canvasEl.getContext("2d")Now that we have access to the drawing context, we have access to a whole slew of methods!
// create a white rectangle the size of the canvas
canvasContext.fillStyle = "white"
canvasContext.fillRect(0,0,canvasEl.width,canvasEl.height)// draw a circle and fill it in red
canvasContext.beginPath()
canvasContext.arc(150, 100, 60, 0, 2 * Math.PI)
canvasContext.fillStyle = "red"
canvasContext.fill()
Here’s a look at the result.
That was fun and easy enough to follow, but might not seem the best way to make simple shapes. It’s also rendered as an image without any semantic HTML options available. But the beauty is when it’s integrated into user interaction and there are more functions in the JavaScript!
The MDN tutorial for canvas includes a section in basic animations, where you can learn how to create a solar system demo or a clock. And soon I’ll be writing more about how to use React and the humble canvas element to create a drawing app! Until then, this hopefully demystifies the basics, and has you playing around with more of the methods available to the context object! You can use the CodePen environment above as a starting point.
