// DRAW SOME LINEAR GRADIENTS
// Demos ported from Mozilla Development Center Canvas Tutorial
canvas.saveContext();
// Create gradients
CanvasGradient lingrad = canvas.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0.0f, new Color("#00ABEB"));
lingrad.addColorStop(0.5f, new Color("#fff"));
lingrad.addColorStop(0.5f, new Color("#26C000"));
lingrad.addColorStop(1, new Color("#fff"));
CanvasGradient lingrad2 = canvas.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5f, new Color("#000"));
lingrad2.addColorStop(1, new Color("rgba(0,0,0,0)"));
// assign gradients to fill and stroke styles
canvas.setFillStyle(lingrad);
canvas.setStrokeStyle(lingrad2);
// draw shapes
canvas.fillRect(10, 10, 130, 130);
canvas.strokeRect(50, 50, 50, 50);
canvas.restoreContext();
// DRAW SOME RADIAL GRADIENTS
// Demos ported from Mozilla Development Center Canvas Tutorial
canvas.saveContext();
canvas.translate(150, 150);
CanvasGradient radgrad = canvas.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, new Color("#A7D30C"));
radgrad.addColorStop(0.9f, new Color("#019F62"));
radgrad.addColorStop(1, new Color("rgba(1,159,98,0)"));
CanvasGradient radgrad2 = canvas.createRadialGradient(105, 105, 20, 112,
120, 50);
radgrad2.addColorStop(0, new Color("#FF5F98"));
radgrad2.addColorStop(0.75f, new Color("#FF0188"));
radgrad2.addColorStop(1, new Color("rgba(255,1,136,0)"));
CanvasGradient radgrad3 = canvas.createRadialGradient(95, 15, 15, 102, 20,
40);
radgrad3.addColorStop(0, new Color("#00C9FF"));
radgrad3.addColorStop(0.8f, new Color("#00B5E2"));
radgrad3.addColorStop(1, new Color("rgba(0,201,255,0)"));
CanvasGradient radgrad4 = canvas.createRadialGradient(0, 150, 50, 0, 140,
90);
radgrad4.addColorStop(0, new Color("#F4F201"));
radgrad4.addColorStop(0.8f, new Color("#E4C700"));
radgrad4.addColorStop(1, new Color("rgba(228,199,0,0)"));
// draw shapes
canvas.setFillStyle(radgrad4);
canvas.fillRect(0, 0, 150, 150);
canvas.setFillStyle(radgrad3);