Firstly, you would have this in the html of the page:
The width and height of the canvas will be 400px.
And if an incompatible browser is used, it will display the text "Browser not compatible with HTML5 canvas".
So first it gets the canvas element by using the id we gave it. It then creates the 2D context with that canvas element.var canvas = document.getElementById('canvas'); var context2D = canvas.getContext('2d'); var img = new Image(); img.src = "http://www.blogger.com/img/logo40.png"; context2D.drawImage(img, 100, 50);
It then loads a new image object and then tells it to use the image from http://www.blogger.com/img/logo40.png by assigning it to the src variable of the Image object.
Then it uses the 2D graphics API by calling the drawImg() function.
The first parameter of the function is looking for an image object, the second is the x-position and the third is the y-position.
So here it is (I added style="background-color: #A9A9A9;" to the canvas so you can see it fully):
So there we go, that is an extremely simple use of the canvas. This is just to get you kick-started.
Here's a pastebin of an example full HTML file for this: http://pastebin.com/zrsrdAGP