In this tutorial I will cover:
- Initialising Canvas
- Drawing circles
- Simple animation for particle movement using
- Improving the code using
Introduced in HTML5, the HTML
<canvas> element isn’t supported in some older browsers, but is supported in recent versions of all major browsers. More information can be found here: http://caniuse.com/#feat=canvas.
<canvas> element requires the closing tag, like so:
This creates a blank canvas for us to use. You can set the with and height at this point:
If not specified, width defaults to 300px and height defaults to 150px.
Some older versions of browsers do not support the
<canvas> element, we can provide fallback content. We just provide alternate content inside the
<canvas> element. Browsers which don’t support
<canvas> will ignore the container and render the fallback content inside it, otherwise they will render the canvas normally:
You can even include a different element inside the canvas element:
We have now initialized a blank canvas and are ready to draw something. I will cover drawing circles in the next blog post.