You are previewing Core HTML5 Canvas: Graphics, Animation, and Game Development.

Core HTML5 Canvas: Graphics, Animation, and Game Development

Cover of Core HTML5 Canvas: Graphics, Animation, and Game Development by David Geary Published by Prentice Hall
O'Reilly logo

2.10.1. Quadratic Curves

Quadratic bézier curves are simple curves that curve in one direction. Figure 2.37 shows the use of three quadratic bézier curves that together constitute a checkbox.

image

Figure 2.37. Using quadratic curves to draw a checkbox

The JavaScript for the application shown in Figure 2.37 is listed in Example 2.22.

Example 2.22. Drawing quadratic curves

var context = document.getElementById('canvas').getContext('2d');context.fillStyle     = 'cornflowerblue';context.strokeStyle   = 'yellow';context.shadowColor   = 'rgba(50,50,50,1.0)';context.shadowOffsetX = 2;context.shadowOffsetY = 2;context.shadowBlur     ...

The best content for your career. Discover unlimited learning on demand for around $1/day.