Canvas - Lines

by M J Khan

HTML

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

CSS

canvas {
  border: 1px solid black;
}

JavaScript

var getCanvasElement = function() {
  return document.getElementById("canvasSurface");
};
var getContext = function(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");
};
(function() {
  var drawingSurface = getCanvasElement();
  var ctxt = drawingSurface.getContext("2d");
  //draw lines on the canvas with the 2d context object
  ctxt.beginPath(); //beginPath Resets/begins a new drawing path			
  ctxt.lineWidth = 10; // lineWidth --> Property to change the thickness.
  ctxt.moveTo(20, 20); //moveTo --> Moves the context to the point set in the beginPath method
  ctxt.lineTo(225, 350); //lineTo --> Sets the destination end point for the line
  ctxt.lineTo(300, 20);
  ctxt.lineCap = 'round';
  /*lineCap ---> 
        property to round to give the line a rounded cap. Applying a cap affects the length of the line. 
        The cap is added to the end of line, and its length matches what you have set for the line’s width
        "butt" || "round" || "square";
       */
  ctxt.lineTo(400, 350);
  ctxt.strokeStyle = '#0f0'; // strokeStyle --> Change the color

  ctxt.stroke(); //stroke --> Strokes the line, which makes the line visible

})();