HTML and CSS Reference
In-Depth Information
the context object; the shadow will then be applied to any shape you
draw.
This example shows the earlier square
with a line through it, now with a
shadow in place:
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 8;
ctx.shadowColor =
"rgba(0, 0, 0, 0.75)";
Using shadows, you can create effects
such as cutout text:
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 5;
ctx.shadowColor =
"rgba(0, 0, 0, 0.9)";
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillText('HAI!',170,50);
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fillText('IZ IN YR ELEMENT'
,170,70);
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.strokeText('WRITIN YR TXT'
,170,90);
Transformations
The
<canvas>
2D context supports a number of transformations. These
work on the context itself, so you apply the transformation and
then draw whatever you want to appear subject to that transform.
