HTML5 finally brought in support for <canvas>, a standard way to draw graphics on the web! Canvas can be used pretty much for everything related to graphics you can think of; from digitally signing with a pen, to creating 3D games on the web (3D games require WebGL knowledge, interested? - visit http://bit.ly/webgl-101).
Let's look at the basics of the Canvas API with a simple example:
<canvas id="canvas" width="100" height="100"></canvas><script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(100, 100); ctx.stroke();</script>
This renders the following:
How does it do this?
- Firstly, document.getElementById('canvas') gives us the ...
