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.
Context
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.
<canvas id="scene"></canvas>
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.
Draw
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 ...
Disillusion
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.
1. Direct
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
- ...
Render loop
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.
In the meantime, try using arc and ellipse instructions on paths. Or even build your own shapes using lineTo
or moveTo
.
See ya !
Top comments (11)
github.com/Nektro/modules.js/blob/...
github.com/GMartigny/pencil.js
When great minds collide ;)
Very nice indeed :D
Cool intro post! I just started to learn about HTML5 canvas too :)
See you soon for part 2. And, don't hesitate to share some of your work here whatever the result. ;)
Hi Guillaume. Quick question: how can I achieve the canvas used on rushordertees.com/design-t-shirts/. Will it part of your coming series, drawing on pictures?
Hi David o/
The link you provide did't use
<canvas>
. However, you can easily achieve the same effect with it. I don't want to sound too teasing, but images will be treated in part 3 ;) (if you have more question, you can mail or tweet me)Stay tuned.
Also. Great article.
Nice post!
I've been using canvas for a while to make arcade games, mostly as a way to sharpen the Javascript saw.
I'm a huge fan of HTML canvas having played with it a lot over a number of years, so great to see a (well written) post about it! HTML canvas can be a lot of fun, looking forward to part 2.
Thanks for you comments, it's heartwarming. Hope I could teach you 1 or 2 things despite your experience. Subscribe to not miss out ;)