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

Get Core HTML5 Canvas: Graphics, Animation, and Game Development now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.