Canvas - quadradicCurveTo

by M J Khan

HTML

<canvas id="canvasSurface" width="700" height="300">
				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 = 'round';
  ctxt.beginPath();
  ctxt.moveTo(10, 280);
  //controlX, controlY --> define the control point, relative to the top left of the canvas, that is used to “stretch” the curve away from the line formed by the start and end points.
  ctxt.quadraticCurveTo(300, -250, 580, 280); //controlX, controlY, endX, endY
  ctxt.lineWidth = 25;
  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");
  };

})();