>but how do I temporarily erase the normal monkey and draw the happy<br>>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'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. "wait"</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't need step 3 or 4, but anyway it's a major issue: we'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'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. "wait"</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'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'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"><<a href="mailto:bryan@olenepal.org">bryan@olenepal.org</a>></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 "happy monkey." 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 = 'chimp/normal_200x209.png';<br>
monkeySadImg.src = 'chimp/sad_200x209.png';<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>