We would like to know how to show Typed text on canvas.
<!--from ww w . j a v a 2 s .c o m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
canvas {
border: 1px solid red;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "18px Arial";
var keyHistory = "";
window.addEventListener("keyup", keyUpHandler, true);
function addletter(letter) {
keyHistory += letter;
ctx.clearRect(0, 0, 300, 300);
ctx.fillText(keyHistory, 20, 20);
}
function keyUpHandler(event) {
var letters = "abcdefghijklmnopqrstuvwxyz";
var key = event.keyCode;
if (key > 64 && key < 91) {
var letter = letters.substring(key - 64, key - 65);
addletter(letter);
}
}
}//]]>
</script>
</head>
<body>
<p>First click in the red canvas below</p>
<p>Then type any lowercase letters from a-z</p>
<br />
<canvas id="canvas" width=300 height=100></canvas>
</body>
</html>
The code above is rendered as follows: