Canvas - bezierCurveTo

by M J Khan

HTML

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

CSS

canvas {
  border: 1px solid black;
}

JavaScript

(function() {
  var drawingSurface = getCanvasElement();
  var ctxt = getContext(drawingSurface);
  ctxt.beginPath(); //beginPath Resets/begins a new drawing path			
  ctxt.lineWidth = 10; // lineWidth --> Property to change the thickness. 
  ctxt.lineCap = 'butt';
  ctxt.beginPath();
  ctxt.moveTo(10, 280);
  //bezierCurveTo --> Another complex arc that you can skew
  ctxt.beginPath();
  ctxt.moveTo(125, 20);
  ctxt.bezierCurveTo(0, 200, 300, 300, 50, 400);
  //Control2X, control2Y The second two parameters specify the second control point that is used to stretch out the curve.
  ctxt.strokeStyle = '#f00';
  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");
  };

})();