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";
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>
<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;}
<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.lineWidth = 5;
context.fillStyle = "orange";
context.strokeStyle = "black";
Search WWH ::

Custom Search