## Creating a Cubic Bezier Curve Loop

You can create some very interesting paths using the four points in a cubic Bezier curve. One such effect is a loop. To create a loop, you need to make sure the points form an X, with `p0` diagonal from `p1`, and `p2` and `p3` on an opposite diagonal from the other two points. `p0` and `p3` must be closer to the center of the canvas than `p1` or `p2`. The points we will use to create this effect in Example 5-13 are as follows:

````var` `p0` `=` `{``x``:``150``,` `y``:``440``;`
`var` `p1` `=` `{``x``:``450``,` `y``:``10``};`
`var` `p2` `=` `{``x``:``50``,` `y``:``10``};`
`var` `p3` `=` `{``x``:``325``,` `y``:``450``};````

Because it is much easier to show than tell when it comes to cubic Bezier curves, look at Figure 5-17. It shows what the looping curve looks like when Example 5-13 is executed in a web browser.

### Note

This effect can be created only with the four points of a cubic Bezier curve. There is also a three-point Bezier curve known as a quadratic Bezier curve. You cannot create loops or S curves with quadratic Bezier curves because the three points are not as precise as the four points of a cubic Bezier curve. Figure 5-17. Moving an object in a loop using a cubic Bezier curve

Because the code for this example is essentially the same as in Example 5-12 (besides the four points), we have highlighted in bold the changed code in Example 5-13. We have done this to show you that—with relatively simple changes—you can create dramatic animation effects using cubic Bezier ...

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.