YouTip

# HTML canvas quadraticCurveTo() Method [ Canvas Object](#) ## Example Draw a quadratic Bézier curve: YourbrowserdoesnotsupporttheHTML5canvastag. JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20); ctx.stroke(); [Try it Yourself »](#) * * * ## Browser Support  The quadraticCurveTo() method is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari. **Note:** Internet Explorer 8 and earlier versions do not support the element. * * * ## Definition and Usage The quadraticCurveTo() method adds a point to the current path by using the specified control points that represent a quadratic Bézier curve. A quadratic Bézier curve requires two points. The first point is the control point for the quadratic Bézier calculation, and the second point is the end point of the curve. The starting point of the curve is the last point in the current path. If a path does not exist, use the [beginPath()](#) and [moveTo()](#) methods to define the starting point.  * Starting point: moveTo(20,20) * Control point: quadraticCurveTo(20,100,200,20) * End point: quadraticCurveTo(20,100,200,20) **Tip:** See the [bezierCurveTo()](#) method. It has two control points, instead of one. | JavaScript syntax: | _context_.quadraticCurveTo(_cpx,cpy,x,y_); | | --- | ## Parameter Values | Parameter | Description | | --- | --- | | _cpx_ | The x-coordinate of the Bézier control point. | | _cpy_ | The y-coordinate of the Bézier control point. | | _x_ | The x-coordinate of the end point. | | _y_ | The y-coordinate of the end point. | * * Canvas Object](#)