I am making a math teaching web page (URL below) and want to use JavaScript to create a wipe-in effect of a Canvas drawing. As you can see on my page, I have drawn a series of rectangles in a pattern. When the student enters the correct answer, I want to draw Fig. 5 using a wipe-in effect. What would be the best way to do that?
My thought at first would be to create a function that draws the entire pattern, then cover it with a white box that decreases in size, but I would surmise that doing it that way would cause a fluttering effect rather than a clean wipe.
Any ideas for how best to accomplish this? Thanks in advance for the help!
URL of page: http://collinmath.com/Lessons/blocks.html URL of Javascript: http://collinmath.com/Lessons/blocks.js
