HTML and CSS Reference
In-Depth Information
Draw a curve through a point
// xt, yt is the point you want to draw through
// x0, y0 and x2, y2 are the end points of the curve
x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;
context.moveTo(x0, y0);
context.quadraticCurveTo(x1, y1, x2, y2);
Summary
This chapter didn't cover much about animation, but it did show you a number of ways to create visual
content, which you learn how to animate in future chapters. Specifically, the chapter covered color, the
canvas drawing API, loading images, and pixel manipulation.
These provide the foundational drawing tools you need to build dynamic, expressive content for your
animations. You use many of the techniques introduced in this chapter throughout the topic, so it is useful
for you to know and understand them well now. In fact, you get your first hands-on experience using
several of these techniques in the next chapter, which covers velocity and acceleration.
