Basic Setup for HTML Canvas

This is a basic setup for starting any project in HTML5 CANVAS and Javascript.
The script that is being used is Modernizer.js which is is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

   

    Canvas Study

    http://modernizr.js

   

       

            Your browser does not support HTML5 Canvas.

       

   

    window.addEventListener(‘load’, eventWindowLoaded, false);

    function eventWindowLoaded() {

        canvasApp();

    }

    function canvasSupport() {

        return Modernizr.canvas;

    }

    function canvasApp() {

        if (!canvasSupport()) {

            return;

        } else {

            var theCanvas = document.getElementById(“canvas”);

            var context = theCanvas.getContext(“2d”);

        }

        drawScreen();

        function drawScreen() {

            context.font = ’20px _sans’;

            context.textBaseline = ‘top’;

            context.fillText(“Canvas!”, 0, 0);

        }

    }

This code should produce a page that outputs the text “Canvas!” in a canvas with white background.

Tags: