html5 manipulating the elements in canvas - html

Question

I want to know how to load an image into the HTML5 canvas. Specifically, I want a script that swaps one image for another on the canvas during mouse over with the original image fading out. I am new to HTML5 and have this code:
<canvas id="myCanvas" width="500" height="500" />
<script type="text/javascript">
function drawbackground() {
char.fillStyle="blue";
cxt.fillRect(0,0,500,500);
}
var charx=0;
var chary=0;
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var char=c.getContext("2d");
drawbackground();
char.fillStyle="black";
var imgObj = new Image();
imgObj.src='map1.png';
imgObj.onload = function () {
// Draw the image on the canvas
char.drawImage(imgObj, 10, 10);
}
</script>
Is this in the right direction?

Answer 1

You can do this without the HTML5 Canvas. To swap an image on mouse over it is easiest to use a JavaScript Framework called jQuery, get it for free here: http://jquery.com/.
With jQuery all you need to do is something like the following:
First, create an image Tag.
<img src="image1.png" id="myimage" />
Next add JavaScript to handle the mouse over event. You can learn more about jQuery events here: http://api.jquery.com/category/events/
$("#myimage").mouseover(function() {
$(this).src = this.src.replace("image2.png");
});
The example above will change the image on mouse over. To do the fade effects, you need to do a little more: You can learn more about jQuery effects here: http://api.jquery.com/category/effects/
I would create two images for the effect and position each over the other with the css property set to hide image 2.
<div id="imageHolder">
<img src="image1.png" id="myimage1" />
<img src="image2.png" id="myimage2" style="display:none" />
</div>
Next comes the JavaScript:
$("#imageHolder").mouseover(function() {
$("#image1").fadeOut();
$("#image2").show();
});
$("#imageHolder").mouseout(function() {
$("#image1").fadeIn();
$("#image2").hide();
});
There are many ways to accomplish this and the code above is not tested, but should provide you with a basis to quickly create the desired effect.