Wednesday, July 13, 2011

[HTML5] Adding Text to your Canvas

Hi Friends,
My last post was just an intro to Canvas and some line drawings. Whenever I see some board, canvas I always want my name written on it.. so i tried adding some text. I will show you how can you put your name over there..

1. Select a font style, size, weight just like css properties and assign like this
c.font = "bold 20px verdana";

2. Now we have two ways to draw it.. either fill or stroke.
c.fillStyle = "#ff0022";
c.strokeText("Only Stroke", 10, 60);
and for stroke
c.strokeStyle = "#00ff00";
c.strokeText("Only Stroke", 10, 60);
Remember if you want both fill and stroke then use both ways like this-
c.fillText("Both Stroke and Filled", 10, 90);
c.strokeText("Both Stroke and Filled", 10, 90);


3. Alignment of text is alwyas important. We can align text to both verticle and horizontal directions.
For horizontal just assign any of these properties start, end, left, center, or right. For ex.
c.textAlign = "left";

For verticle assign any of these properties top, hanging, middle, alphabetic, ideographic, and bottom. For ex.
c.textBaseline = "top";


Easy.. right? And this is output when I was trying something.. :)


Cheers!!!
Ravi Kumar Gupta

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.