Canvas How to - Show Typed text on canvas








Question

We would like to know how to show Typed text on canvas.

Answer


<!--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: