//Basic canvas drawing - For www.Bluelemoncode.com
var canvas = document.getElementById("myCanvas"); //create canvas object
var context = canvas.getContext("2d"); //get canvas context
/***** Draw line *****/
context.lineWidth = 8; // define line width
context.strokeStyle = "blue"; // define line color
context.moveTo(70, 50); //define x,y position for line starting point
context.lineTo(400, 50); //define x,y for end position
context.stroke(); //draw using defined information
/***** Draw circle *****/
//reset list of subpaths so that the context once again has zero subpaths
context.beginPath();
//use arc method to draw circle. The parameters are
//arc(x, y, radius, startAngle, endAngle, anticlockwise)
context.arc(180, 150, 50, 0, 2 * Math.PI, false); //remember.. PI in circle formula
context.fillStyle = "blue"; // fill color
context.lineWidth = 2; //define width of circle border
context.strokeStyle = "black"; //define border color
context.fill();
context.stroke();//draw using defined information
/***** Draw Image *****/
//reset path again
context.beginPath();
var imageObj = new Image(); //create image object
imageObj.src = "http://bluelemoncode.com/Demo/car.jpg"; //assign image source
context.drawImage(imageObj, 70, 250); //draw image using image object at specified position
<canvas id="myCanvas" width="578" height="800">
</canvas>