HTML Reference Manual

HTML tag大全

HTML canvas quadraticCurveTo() method

quadraticCurveTo() is a Canvas 2The D API adds a method for quadratic Bezier curve paths. It requires2Points. The first point is the control point, the second point is the end point. The starting point is the latest point on the current path; you can change it using the moveTo() method before creating a quadratic Bezier curve.

HTML canvas reference manual

Online Example

Draw a quadratic Bezier curve:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas bezierCurveTo() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome and Safari support quadraticCurveTo() Method.

Note:Internet Explorer 8 Previous versions do not support the <canvas> element.

Definition and usage

The quadraticCurveTo() method adds a point to the current path by using the specified control points that represent the quadratic Bezier curve.

A quadratic Bezier curve requires two points. The first point is the control point used in the quadratic Bezier calculation, and the second point is the endpoint of the curve. The starting point of the curve is the last point in the current path. If the path does not exist, then please use beginPath() and moveTo() Method to define the starting point.

Starting point:

moveTo(20,20)

Control point:

quadraticCurveTo(20,100,200,20)

Endpoint:

quadraticCurveTo(20,100,200,20)

Tip:See also: bezierCurveTo() Method. It has two control points instead of one.

JavaScript syntax:	context.quadraticCurveTo(cpx,cpy,x,y);

Parameter value

Parameter	Description
cpx	The x-coordinate of the Bezier control point.
cpy	The y-coordinate of the Bezier control point.
x	The x-coordinate of the endpoint.
y	The y-coordinate of the endpoint.

HTML canvas reference manual

HTML: <template> Tag