HTML and CSS Reference
In-Depth Information
Using the illRect method reduces the amount of code required. And it's just as simple to
fill nonrectangular shapes, such as the complex Path graphic that you created earlier, with a
single call to the ill method:
ctxt.arc(300, 200, 75, 1.75 * Math.PI, 1.25 * Math.PI, false);
ctxt.lineTo(150, 125);
ctxt.quadraticCurveTo(300, 0, 450, 125);
ctxt.lineTo(353, 144);
ctxt.strokeStyle = "blue";
ctxt.lineCap = "round";
ctxt.lineWidth = 10;
ctxt.fillStyle = "Green";
You can see in Figure 1-35 that the logic of coloring in this complex shape is completely
handled by the browser.
FIGURE 1-35 Using the fill method to color in a complex object
That's all it takes to fill a shape with a solid color. Filling shapes with a gradient requires a
few extra steps.
Creating a gradient involves using a new CanvasGradient object. You first call the
createLinearGradient method available on the context object to get a CanvasGradient object.
On that CanvasGradient object, you define the color stops that you want to blend to create
the gradient effect. Then you assign your CanvasGradient object to the illStyle property of
the context. The following code creates and fills a rectangle with a linear gradient:
var ctxt = drawingSurface.getContext("2d");
ctxt.lineWidth = 3;
ctxt.rect(150, 150, 200, 125);
var gradient = ctxt.createLinearGradient(150, 150, 200, 125);
gradient.addColorStop(0, "Black");
gradient.addColorStop(0.5, "Gray");
ctxt.fillStyle = gradient;
Search WWH ::

Custom Search