This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

quadraticCurveTo

Summary

Ensures there is a subpath for (cpx, cpy), then connects the last point in the subpath to the given point (x, y) using a quadratic Bézier curve with control point (cpx, cpy), and then adds the given point (x, y) to the subpath.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var object = object.quadraticCurveTo(cp1x, cp1y, x, y);

Parameters

cp1x

Data-type
Number

The x-coordinate of the Bézier control point.

cp1y

Data-type
Number

The y-coordinate of the Bézier control point.

x

Data-type
Number

The x-coordinate of the point to add to the current path.

y

Data-type
Number

The y-coordinate of the point to add to the current path.

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Examples

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can=document.getElementById("myCanvas");
var ctxt=can.getContext("2d");
ctxt.beginPath();
ctxt.moveTo(50,50);
ctxt.quadraticCurveTo(50,100,200,50);
ctxt.stroke();
</script>

Notes

A quadratic Bézier curve requires two points. The first is a control point that is used in the quadratic Bézier calculation and the second is the ending point for the curve. The starting point for the curve is the last point in the existing current subpath. If a path does not exist, use the beginPath and moveTo methods to set a starting point.

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions