Integrating advanced Design elements - HTML5 - page 262

Then, you need to identify the path to the web-compatible image (GIF, JPG, or PNG formats only):
bobcat.src = “images/bobcat.gif”;
The last step is drawing the image on the canvas. However, you have to make sure that the source
file has fully loaded. This is handled through a generic function() call that is triggered by the
image's onload event handler:
bobcat.onload = function() {
myCanvas_context.drawImage(bobcat, 75, 75);
};
When you put it all together, the code looks like this (with the image-related code bolded):
<script type=”text/javascript”>
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);
var myCanvas_context = my_canvas.getContext(“2d”);
myCanvas_context.strokeStyle = “#000000”;
myCanvas_context.fillStyle = “#FFFF00”;
myCanvas_context.beginPath();
myCanvas_context.arc(150,150,100,0,Math.PI*2,true);
myCanvas_context.closePath();
myCanvas_context.stroke();
myCanvas_context.fill();
var bobcat = new Image();
bobcat.src = “images/bobcat.gif”;
bobcat.onload = function() {
myCanvas_context.drawImage(bobcat, 75, 75);
};
}
</script>
Because the bobcat.gif image was created with an index color transparency, the canvas back-
ground color in the circle comes through, as shown in Figure 28-10.
FiGure 28-10