# quadraticCurveTo - method of object CanvasCtx

###### Description:
The method adds additional point for the Bézier quadratic curve. A quadratic Bézier curve requires two points. The first point is a control point that is used in the quadratic Bézier calculation. The second point is the ending point of the curve. The base point of the curve is the last point entered. If a point doesn't exist, then the beginPath() and moveTo() methods are used to define a base point.
###### Syntax:
quadraticCurveTo(cpx As Long, cpy As Long, x As Long, y As Long) As Object
###### Calling:
`ctx.quadraticCurveTo(cpx, cpy, x, y);`
###### Parameters:
cpx (Long) The x-coordinate of the Bézier curve point (Long) The y-coordinate of the Bézier curve point (Long) The x-coordinate of the ending point (Long) The y-coordinate of the ending point
###### Note:
The method creates a path. Therefore before this method is called the beginPath method should be called. For the rendering itself the stroke or fill method is used.

The method can also be called in the graphic item events for Web panels.
###### Example1:
The ctx variable represents the drawing canvas (CanvasCtx). The setup is done on Draw page at the beginning of the script of drawing event onDraw as follows:

var ctx = pEvent.GetCtx(1);
JavaScriptSelect and copy to clipboard
`ctx.beginPath();ctx.moveTo(20, 20);ctx.quadraticCurveTo(20, 100, 200, 20);ctx.stroke();`
###### Example2:
JavaScriptSelect and copy to clipboard
`ctx.beginPath();ctx.moveTo(75, 25);ctx.quadraticCurveTo(25, 25, 25, 62.5);ctx.quadraticCurveTo(25, 100, 50, 100);ctx.quadraticCurveTo(50, 120, 30, 125);ctx.quadraticCurveTo(60, 120, 65, 100);ctx.quadraticCurveTo(125, 100, 125, 62.5);ctx.quadraticCurveTo(125, 25, 75, 25);ctx.stroke();`
PROMOTIC 8.3.29 SCADA system documentation - MICROSYS, spol. s r.o.

Send page remarkContact responsible person
Navigation:

- ctx

- arc
- quadraticCurveTo