<html>
<script type="application/javascript">
function paint() {
var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var ctx = canvas1.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 4;
ctx.shadowColor = "rgba(0, 0, 0, .4)";
ctx.shadowBlur = 4;
var gradient = ctx.createRadialGradient(45, 38, 0, 50, 50, 30);
gradient.addColorStop(0, "rgb(140, 200, 255)");
gradient.addColorStop(1, "rgb(40, 120, 255)");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.arc(50, 50, 25, Math.PI / 8, -Math.PI / 8, false);
ctx.closePath();
ctx.fill();
ctx = canvas2.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowColor = "rgba(0, 0, 0, .4)";
ctx.shadowBlur = 5;
ctx.fillStyle = "rgb(40, 120, 255)";
var x = 50;
var y = 30;
var angle = Math.PI / 6;
var colors = ["rgb(0, 0, 255)",
"rgb(0, 255, 0)",
"rgb(255, 0, 0)",
"rgb(240, 240, 0)",
"rgb(0, 240, 240)"];
for (var i = 0; i < 5; i++) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.moveTo(-15, -20);
ctx.arcTo(20, -20, 20, -15, 5);
ctx.arcTo(20, 20, 15, 20, 5);
ctx.arcTo(-20, 20, -20, 15, 5);
ctx.arcTo(-20, -20, -15, -20, 5);
ctx.fill();
ctx.restore();
y += 10;
angle += Math.PI / 8;
}
}
</script>
<style>
body {
font: 10pt sans-serif;
}
td {
padding: 20px;
}
.shadowtest {
font: 20pt sans-serif;
color: white;
text-shadow: black 2px 2px 5px;
}
.brtest1 {
border-style: dotted;
border-width: 8px 2px 4px 6px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-color: red green blue purple;
width: 120px;
height: 120px;
}
</style>
<body onload="paint();">
<table>
<tr><td align="center">
<div class="shadowtest">
Text shadow test
</div>
</td></tr><tr><td align="center">
<div class="brtest1"></div>
Rounded borders with varying widths and colors.
</td></tr><tr><td align="center">
<canvas id="canvas1" width="100" height="100" style="border: solid 1px;"></canvas>
<br>
You should see a light blue pacman figure with a fuzzy drop shadow and a radial gradient.
</td></tr><tr><td align="center">
<canvas id="canvas2" width="100" height="100" style="border: solid 1px;"></canvas>
<br>
You should see five rotated colored rectangles with rounded corners and shadows.
The shadow offset should be unaffected by the rotation.
</td></tr><tr><td align="center">
</table>
</body>
</html>