HTML and CSS Reference
In-Depth Information
function textBoxChanged(e) {
var target = e.target;
message = target.value;
drawScreen();
}
function fillOrStrokeChanged(e) {
var target = e.target;
fillOrStroke = target.value;
drawScreen();
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
<form>
Text: <input id="textBox" placeholder="your text" />
<br>
Fill Or Stroke :
<select id="fillOrStroke">
<option value="fill">fill</option>
<option value="stroke">stroke</option>
<option value="both">both</option>
</select>
<br>
</form>
</div>
</body>
</html>
Setting the Text Font
Now that we have placed text on the canvas, it's time to explore some of the basics of
setting the
context.font
property. As you will see, specifying the font for displaying
basic text on Canvas is really no different from doing the same thing in HTML and CSS.
Font Size, Face Weight, and Style Basics
It is very easy to style text that will be rendered on the canvas. It requires you to set the
size, weight, style, and font face in a CSS-compliant text string that is applied to the
context.font
property. The basic format looks like this:
