HTML and CSS Reference
In-Depth Information
function textAlignChanged(e) {
var target = e.target;
textAlign = target.value;
drawScreen();
}
function fontWeightChanged(e) {
var target = e.target;
fontWeight = target.value;
drawScreen();
}
function fontStyleChanged(e) {
var target = e.target;
fontStyle = 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>
Text Font: <select id="textFont">
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
<br>
Text Size: <input type="range" id="textSize"
min="0"
max="200"
step="1"
value="50"/>
<br>
Text Color: <input class="color" id="textFillColor" value="FF0000"/>
<br>
