Core HTML5 Canvas: Graphics, Animation, and Game Development

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.

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

Click here to view code image

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     ...