Drawing the Text

Finally, we draw the text to the Canvas, and the drawScreen() function is complete. In 20 milliseconds, drawScreen() will be called again, the alpha value will be updated, and the text will be redrawn:

    context.font         = "72px Sans-Serif";
    context.textBaseline = "top";
    context.fillStyle    = "#FFFFFF";
    context.fillText  (text, 150,200);
}

The full code for this example is as follows:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX5 : Hello World Animated </title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded () {
    canvasApp();
}

function canvasSupport () {
      return Modernizr.canvas;
}

function canvasApp () {

          if (!canvasSupport()) {
             return;
          }

        var theCanvas = document.getElementById("canvasOne");
        var context = theCanvas.getContext("2d");

          function drawScreen() {
            //background
            context.globalAlpha = 1;
            context.fillStyle = "#000000";
              context.fillRect(0, 0, 640, 480);
            //image
            context.globalAlpha = .25;
            context.drawImage(helloWorldImage, 0, 0);


            if (fadeIn) {
                alpha += .01;
                if (alpha >= 1)  {
                    alpha = 1;
                    fadeIn = false;
                }
            } else {
                alpha -= .01;
                if (alpha < 0)  {
                    alpha = 0;
                    fadeIn = true;
                }
            }

            //text
            context.font         = "72px Sans-Serif";
            context.textBaseline = "top";


            context.globalAlpha = alpha;
            context.fillStyle    = "#FFFFFF";
            context.fillText  (text, 150,200);

        }

        var text = "Hello World";
        var alpha = 0;
        var fadeIn = true;
        //image
        var helloWorldImage = new Image

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial