Updating Canvas content on onmouseover and onmouseout

Question

I'm working on creating a game using HTML5 and in my work i'm usually update canvas content based on onmouseover and onmouseout . on onmouseover i'm doing that

                    cxt.beginPath();
                    cxt.moveTo(10, 10);
                    cxt.lineTo(40, 40);
                    cxt.moveTo(40, 10);
                    cxt.lineTo(10, 40);
                    cxt.stroke();
                    cxt.closePath();
                    content[canvasNumber - 1] = 'Value';

now and on onmouseout event i want to clear the content of that canvas without overriding the current content !!, how can i do that ?!

Answer 1

I think I know what you mean, but you have to be a little more careful with your language. You say:

without overriding the current content !!

But the X you just drew is current content! I think what you really meant to say was "without clearing the content that was there before".

Of course we'll always try our hardest to answer your questions, but please try very hard to use exact and careful language when asking them. English might not be your first language, and you probably speak it better than I speak my second language, but even if you're not sure of the words, even if you have to say the same thing in a few different ways, more language is worth it just to be sure we understand.

Thanks! Onto the answer now.

---

If you want to clear the X without overriding the content that was there before, you have to save the content that was there before.

To save a canvas bitmap we can use what's called an "in-memory canvas" or "offscreen canvas." You make these by using document.createElement and never adding them to the DOM

Here's a code example of saving the bitmap when mouseover occurs and restoring that bitmap when mouseout occurs:

http://jsfiddle.net/simonsarris/uRXeN/