quadraticCurveTo - method of the CanvasCtx object
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 does not exist, then the
beginPath() and
moveTo() methods are used to define a base point.
Syntax:
Object quadraticCurveTo(Long cpx, Long cpy, Long x, Long y)
Parameters:
| cpx | (Long) The x-coordinate of the Bézier curve point |
|---|
| cpy | (Long) The y-coordinate of the Bézier curve point |
|---|
| x | (Long) The x-coordinate of the ending point |
|---|
| y | (Long) The y-coordinate of the ending point |
|---|
Note:
The method creates a path. Therefore before calling this method the
beginPath method should be called. For the rendering itself the
stroke or
fill method is used.
This method is also functional in
Web panels.
Example1:
The
ctx variable represents the drawing canvas (
CanvasCtx). The setup is done on the "
Draw" tab 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();