draw_image

Draw Image

Sometimes we may need some images to style our custom shapes more cool and stylish.So by using canvas drawImage method we can insert a image in our canvas.

Structure:

drawImage(image Source,X ,Y);

Remember if you give 10,10 on X and Y then image top left corner. will start from 10 pixel left and 10px down to the top left corner of canvas.
Additionally you can specify the width and height of image after the position X,Y.

drawImage(imagesource,X,Y,width,height).
Remember Image height and weight parameter is optional.

There are two way you can draw image on canvas.One is to create a image object and then pass this object to drawImage method.Another way is to save the image location on a variable and then just use the variable on source place.

sorry your browser doesnot support canvas tag.

F<canvas height="300px" id="cir" width="400px">
sorry your browser doesnot support canvas tag.
</canvas>


<script type="text/javascript">
var sex=document.getElementById("cir");
var sec=sex.getContext("2d");
var img=document.getElementById("island");
sec.drawImage(img,10,10);

</script>

Here we firstly insert a image above the canvas and give it a id for future usuage.Then we just use this id and draw our image in canvas.Remember if you use the image below the canvas then you have to use window.onload function to wait until image loading complete in DOM.