HTML and CSS Reference
In-Depth Information
context.fillStyle = "rgb(0,0,255)";
context.strokeStyle = "rgb(0,0,0)";
context.fillText("Canvas is great!",10,40);
context.strokeText("Canvas is great!",10,40);
To get more-customized text, you can use the
font
property, which you set identically
to a CSS
font
property. You can use
textAlign
and
textBaseline
to set the horizontal
and vertical alignment of the text string. The
textAlign
property has the possible values of
start
,
end
,
left
,
right
, and
center
. The
textBaseline
property can be set to
top
,
hanging
,
middle
,
alphabetic
,
ideographic
, and
bottom
.
context.font = "bold 30px sans-serif";
context.textAlign = "center";
context.textBaseline = "middle";
You can add shadows to shapes simply by setting the shadow properties,
shadowOffsetX
,
shadowOffsetY
,
shadowBlur
, and
shadowColor
. The offsets simply set how far the shadow
should be offset from the image. A positive number would make the shadow go to the right
and down. A negative number would make it go to the left and up. The
shadowBlur
property
indicates how blurred the shadow will be, and the
shadowColor
property indicates the color.
This code fragment demonstrates setting a shadow.
context.shadowOffsetX = 10;
context.shadowOffsetY = 5;
context.shadowColor = "rgba(255,48,48,0.5)";
context.shadowBlur = 5;
context.fillStyle = "red";
context.fillRect(100,100,100,100);
All the concepts from this and the last section can be put together as follows to caption
an image with some shadowed text, as shown in Figure 2-6.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
canvas Text Example
</title>
<style type="text/css">
canvas {border: 1px solid black;}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "dog.jpg";
img.onload = function(){
context.lineWidth = 5;
context.drawImage(img,0,0,400,400);
context.beginPath();
context.lineWidth = 5;
context.fillStyle = "orange";
context.strokeStyle = "black";
