Draw image
Description
The following code draws image on canvas. It registers an onload event handler and draws image using canvas context in there. The onload event handler is called once an image is fully loaded.
Example
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){<!--from www . j a v a2 s . c om-->
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
var destX = canvas.width / 2 - this.width / 2;
var destY = canvas.height / 2 - this.height / 2;
context.drawImage(this, destX, destY);
};
imageObj.src = "http://java2s.com/style/download.png";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>