In this example, we'll draw the same flag as we did before, except that this time we'll animate different shapes. The underlying HTML used in this example is exactly the same as in the previous examples. All that changes is the content of the <script>
element at the end of the <body>
element.
To make the working file for this example, just remove everything in the
<script>
element at the bottom ofcanvas-explorer.html
and resave the file ascanvas-animated.html
.The first thing we'll do is bring the blue rectangle in from the side of the canvas to the center of the
<canvas>
element. Add the following code to the now empty<script>
element at the bottom of the page:(function() { var canvas = document.getElementById("c"), init = function(context) { var width = 0, pos = 0, rectMotion = function() { if (width < 400) { width = width + 2; context.fillStyle = ...