Drawing in a canvas
Since HTML5, it's possible to use the
<canvas> tag on your page. But, how are you supposed to use it ?
In this first part, we're going to look at available ways to draw shapes.
First of all you need to get the drawing context form the HTML element. In our case, we inform the browser we just want to use it for 2 dimensional drawing.
const canvasElement = document.getElementById("scene"); const drawingContext = canvasElement.getContext("2d");
You can pass
"webgl" to get a 3 dimensional rendering context, but better keep it simple for now.
Once we have a context, we can use it to draw into the browser page.
For example, let's draw a rectangle with the
rect instruction :
Hum, that a blank page.
Well ... that's embarassing ...
Using canvas is a piece of cake, but the syntax is so cumbersome !
At the same time, this syntax allow for amazing performance boost, but can be very obtuse for new-learners.
In fact, there's 3 way to draw a rectangle, each with varying degree of clarity.
The most simple way is to use the
fillRect method. However, this type of method is only available for rectangles and texts (with
fillText). Which is too limited, but the only way in the case of rendering text.
2. Current path
Secondly, it's possible to define a path sequentially, then fill it or stroke it.
Not that bad, but you have to keep track of the state yourself.
3. Path object
Finally, the third way is to use the
Path2D class to define a path. The big advantage is that you can store a path in a variable and use it later.
The last one is the most versatile and useful. Paths can be use in many ways in the canvas API :
- isPointInPath - tell if a position is inside a path
- clip - Remove everything outside of a path
- addPath - add path to one another
Rendering 1 frame is great, but not very dynamic. The most critical trick to know about animation is the rendering loop.
To create a smooth animation, you need to update the view 60 times per seconds (to achieve 60FPS). One second divided by 60 gives about 16ms, so you could
timeout for 16ms every draw. Hopefully, there's a better way.
Your browser already refresh itself at 60FPS and you can ask it to sync a function to this loop. Thanks to
requestAnimationFrame, you can bind a callback to the next window refresh.
Remember that updating means to clear the whole canvas an drawing it again. I also add a check in case we need to stop the animation. And voilà, our first animation.
Are you kidding me ? This is not working again ?
No, no, it working like a charm !
Indeed, nothing going on here because we draw the same frame over and over. We need to update the canvas' state, but this is a story for part 2.
See ya !