&gt;but how do I temporarily erase the normal monkey and draw the happy<br>&gt;monkey?<div>think in canvas as a big rectangle, whatever you draw are pixels and not objects, so, you can not clear an object :(....at least, it&#39;s not as easy </div>

<div><br></div><div>the procedure I have follow with my early experiments:</div><div>proc 0)</div><div>0. draw the bg image</div><div>1. draw the shape( at position 0). set x=1</div><div>2. &quot;wait&quot;</div><div>3. clear the canvas</div>

<div>4. draw the bg image</div><div>5. draw the shape (at position x )</div><div>6. loop 2. x+=1</div><div><br></div><div>maybe you won&#39;t need step 3 or 4, but anyway it&#39;s a major issue: we&#39;re clearing the whole canvas and/or redrawing all the objects (think about all the time and cpu wasted rendering all the objects)</div>

<div><br></div><div>proc 1)</div><div>0. draw the bg image</div><div>1. draw the shape( at position 0). set x=1</div><div>2. calculate the next shapes&#39;s position and calculate the position of the overlapping rectangle (bg and shape) at the next shape iteration (at position x)</div>

<div>3. get the image data of the overlapping rectangle (calculated on step 2) using context.getImageData()</div><div>4. &quot;wait&quot;</div><div>5. redraw the overlapping rectangle using putImageData()</div><div>6. draw the shape (at position x)</div>

<div>7. loop 2. x+=1</div><div><br></div><div>it&#39;s more complicated, but we save time and cpu (neither clearing the canvases nor redrawing all the objects), please note that we also waste time and cpu saving a certain canvas area, but it&#39;s just a small region. The issue using this method is that: getImageData will throw you an NS_ERROR_DOM_SECURITY_ERR error (tested with ff 3.5.2) when the images are not on the same domain. I got this error when loading the html document using file:/// </div>

<div><br></div><div>I have used proc 0) on quadrilaterals</div><div><br><div class="gmail_quote">2009/8/24 Bryan Berry <span dir="ltr">&lt;<a href="mailto:bryan@olenepal.org">bryan@olenepal.org</a>&gt;</span><br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">

Hey Felipe,<br>
<br>
I am trying to add the sprite for the &quot;happy monkey.&quot; The monkey starts<br>
off in the normal position, then when the user gets the answer right I<br>
want to briefly show the happy monkey image instead.<br>
<br>
I am completely confused how to load the happy monkey<br>
I am trying to 1st draw the normalmonkey w/<br>
<br>
context.drawImage(....)<br>
<br>
but how do I temporarily erase the normal monkey and draw the happy<br>
monkey?<br>
<br>
below is my current, horrible, ineffective code<br>
<br>
        //draw monkey<br>
        var monkeyNormalImg = new Image();<br>
        var monkeySadImg = new Image();<br>
        monkeyNormalImg.src = &#39;chimp/normal_200x209.png&#39;;<br>
        monkeySadImg.src = &#39;chimp/sad_200x209.png&#39;;<br>
<br>
        monkeyNormalImg.onload = function () {<br>
            monkeyCtx.drawImage(monkeyNormalImg, 0,20);<br>
        };<br>
<br>
        var redrawMonkey = function () {<br>
                monkeySadImg.onload = function () {<br>
                    monkeyCtx.drawImage(monkeySadImg, 0,20);<br>
                };<br>
<br>
        };<br>
<font color="#888888"><br>
<br>
<br>
--<br>
Bryan W. Berry<br>
Technology Director<br>
OLE Nepal, <a href="http://www.olenepal.org" target="_blank">http://www.olenepal.org</a><br>
<br>
</font></blockquote></div><br><br clear="all"><br>-- <br>Felipe López Toledo<br>
</div>