canvas.js

window.onload = function () {
  // create canvas DOM element / object
  var canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  
  // get context to draw on it
  canvas = canvas.getContext("2d");

  var drawSmiley = function (x, y) {
    // "http://lorempixel.com/400/200/animals/3/" tiger
    
    // start from top left corner 
    canvas.moveTo(0, 0);
    
    // default values
    x = x || 75;
    y = y || 75;
    
    // Draw shapes
    canvas.beginPath();
    
    // Outer circle
    // arc(x, y, radius, startAngle, endAngle, anticlockwise)
    canvas.arc(x, y, 50, 0, Math.PI * 2, true); 

    // Mouth
    canvas.moveTo(x + 35, y);
    canvas.arc(x, y, 35, 0, Math.PI, false);

    // Left eye
    canvas.moveTo(x - 10, y - 10);
    canvas.arc(x - 15, y - 10, 5, 0, Math.PI * 2, true);

    // Right eye
    canvas.moveTo(x + 20, y - 10);
    canvas.arc(x + 15, y - 10, 5, 0, Math.PI * 2, true);

    // Draw actual lines
    canvas.stroke();
  };
  
  // export globals
  window.canvas = canvas;
  window.drawSmiley = drawSmiley;

};