canvas-quadratic curve

by bhupendra negi

HTML

<canvas id="container" width="300" height="350">NO canvas support in your browser</canvas>

CSS

canvas {
    border:1px solid blue
}

JavaScript

var canvas = document.getElementById("container");
var ctx = canvas.getContext("2d");
console.log(ctx);



ctx.beginPath();
ctx.moveTo(18, 70); // start point 
//control  point is (38,0) , end point (58,70);
ctx.quadraticCurveTo(38, 0, 58, 70);
ctx.lineWidth = 10;
ctx.strokeStyle = "black";
ctx.stroke();