<canvas id="canvas" width="620" height="150"></canvas>
<canvas id="canvas2" width="620" height="150"></canvas>
<canvas id="vmlcanvas" class="vml" width="620" height="150"></canvas>
function boot() {
draw(document.getElementById('canvas').getContext('2d'));
draw(document.getElementById('canvas2').getContext('2d'), 1);
draw(document.getElementById('vmlcanvas').getContext('2d'));
}
function draw(ctx, disableShadowBlurAPI) {
if (disableShadowBlurAPI) {
ctx.xShadowBlur = 0; // Old Silverlight(ver1, ver2) rendering simulate
}
// Create gradients
var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
ctx.textBaseline = "top";
ctx.font = "36pt Arial";
ctx.fillStyle = radgrad;
ctx.strokeStyle = radgrad;
ctx.xMissColor = "greenyellow";
var text = setShadow(ctx, 4, 10, 10, "black");
ctx.fillText("fillText: " + text, 20, 20);
ctx.strokeText("strokeText: " + text, 20, 80);
}
function setShadow(ctx, blur, ox, oy, color) {
ctx.setShadow(color, ox, oy, blur);
return [color, ox, oy, blur].join(", ");
}