Edit this page


Draws a cubic Bézier curve (with two control points).

A quadratic Bézier curve (with one control point) can be plotted by making the control point equal.

Example - Draw a curved path

<div id="surface" style="width: 250px; height: 250px;"></div>
    var draw = kendo.drawing;

    var path = new draw.Path()
        .moveTo(100, 200)
        .curveTo([100, 100], [250, 100], [250, 200])
        .lineTo(100, 200);

    var surface = draw.Surface.create($("#surface"));


controlOut Array |kendo.geometry.PointThe first control point for the curve.
controlIn Array |kendo.geometry.PointThe second control point for the curve.
endPoint Array |kendo.geometry.PointThe curve end point.

Returnskendo.drawing.Path The current instance to allow chaining.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article