Canvas Graphics Reference

<canvas id="myCanvas" width="300" height="200">
  Your browser doesn't support the canvas element; please update!
</canvas>
<script>
  var myCanvas = document.getElementById("myCanvas");
  var myContext = myCanvas.getContext("2d");
  // now draw using myContext as shown below
</script>

myContext.beginPath();
myContext.moveTo(x1, y1);    // y is measured down from top
myContext.lineTo(x2, y2);    // coordinates need not be integers
myContext.lineTo(x3, y3);    // add as many segments as desired
myContext.strokeStyle = "blue";
myContext.lineWidth = 2;
myContext.stroke();
myContext.fillStyle = "yellow";
myContext.fill();            // fill the polygon

myContext.fillStyle = "green";
myContext.fillRect(x, y, width, height);

myContext.beginPath();
myContext.arc(x, y, r, 0, 2*Math.PI);   // use other angles for arcs
myContext.fill();    // or myContext.stroke() for open circle

myContext.font = "30px sans-serif";
myContext.fillStyle = "#8000ff";
myContext.fillText("Hello, Canvas!", x, y);  // baseline left x & y

myImage = new Image();
myImage.src = "imageFile.png";       // .jpg and .gif work too
myImage.onload = myFunction;         // function to call when ready
myContext.drawImage(theImage, x, y); // upper-left corner x & y

myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);

myContext.translate(dx, dy);
myContext.scale(xScale, yScale);
myContext.rotate(angleInRadians);
myContext.setTransform(1, 0, 0, 1, 0, 0);   // reset

image = myContext.createImageData(myCanvas.width, myCanvas.height);
for (y=0; y<myCanvas.height; y++) {
  for (x=0; x<myCanvas.width; x++) {
    index = (x + y*myCanvas.width) * 4;   // index into data array
    image.data[index]   = redLevel;       // 0 to 255
    image.data[index+1] = greenLevel;
    image.data[index+2] = blueLevel;
    image.data[index+3] = transparency;   // 255 is opaque
  }
}
myContext.putImageData(image, 0, 0);      // blast image to screen