Let's take a look at a quick example of drawing a non-animated shape. We don't even need jQuery for this.
Add the
<canvas>
element to the<body>
tag of our template file:<canvas id="c" width="500" height="300"> <p>Your browser doesn't support the canvas element!</p> </canvas>
Next we can add the JavaScript that will draw to the
<canvas>
elements. We'll draw a Union Jack flag. Function in the<script>
element at the bottom of the template file and add the following code in its place:var canvas = document.getElementById("c"), context = canvas.getContext("2d"); context.fillStyle = "#039"; context.fillRect(50, 50, 400, 200); context.beginPath(); context.strokeStyle = "#fff"; context.lineWidth = 50; context.moveTo(250, 50); context.lineTo(250, 250); context.moveTo(50, 150); context.lineTo(450, 150); context.moveTo(50, 50); context.lineTo(450, 250); context.moveTo(50, 250); context...