Canvas - advanced

by M J Khan

HTML

<canvas id="canvasSurface" width="600" height="310">
				Your browser does not support HTML5.
			</canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

(function() {
  var drawingSurface = getCanvasElement();
  var ctxt = getContext(drawingSurface);
  //drawing text
  ctxt.strokeText("What is this?", 100, 100);
  ctxt.beginPath();
  ctxt.arc(300, 200, 75, 1.75 * Math.PI, 1.25 * Math.PI, false);
  ctxt.lineTo(150, 125);
  ctxt.quadraticCurveTo(300, 0, 450, 125);
  ctxt.lineTo(353, 144);
  ctxt.strokeStyle = "blue";
  ctxt.lineCap = "round";
  ctxt.lineWidth = 10;
  ctxt.stroke();

  ctxt.beginPath();
  ctxt.arc(300, 200, 75, 1.75 * Math.PI, 1.25 * Math.PI, false);
  ctxt.lineTo(150, 125);
  ctxt.quadraticCurveTo(300, 0, 450, 125);
  ctxt.lineTo(353, 144);
  ctxt.strokeStyle = "blue";
  ctxt.lineCap = "round";
  ctxt.lineWidth = 10;
  ctxt.fillStyle = "Green";
  ctxt.fill();
  ctxt.stroke();

  function getCanvasElement() {
    return document.getElementById("canvasSurface");
  };

  function getContext(drawingSurface) {
    /* 
    The context is an object that provides the API methods you use to draw on the canvas. 
    Now, <canvas> supports only a 2d context    
    */
    return drawingSurface.getContext("2d");
  };

})();