Home/ Questions/Q 8800405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T00:34:48+00:00

I have written the following HTML5 code with JavaScript which is exactly an example

  • 0

I have written the following HTML5 code with JavaScript which is exactly an example of HTML5 Canvas, but it doesn’t work in my browsers. I tried in Safari, Firefox, and Opera. I looked for errors several time and corrected some small errors, but it doesn’t work yet.

Please check it and let me know what the mistake can be.

<!doctype html>
<html lang="en">
<head>
    <title>test</title>
    <script src = "modernizr-1.6.min.js"></script>
    <script type="text/javascript">
        window.addEventListener("load", eventWindowLoaded, false);
        var Debugger = function() {};
        Debugger.log = function(message){
            try{
                console.log(message);
            } catch (exception){
                return;
            }
        }
        function eventWindowLoaded(){
            canvasApp();
        }
        function canvasSupport(){
            return Modernizr.canvas;
        }
        function canvasApp(){
            if (!convasSupport()){
                return;
            }
            var theCanvas = document.getElementById("canone");
            var context = theCanvas.getContext("2d")

            Debugger.log("Nooooooooooooooooo");

            function drawScreen(){

                //background
                context.fillStyle="#ffffaa";
                context.fillRect=(0,0,500,500);

                //text
                context.fillStyle="#000000";
                context.font="20px_sans";
                context.textBaseline="top";
                context.fillText("hello world", 250, 100);

                //image
                var image = new Image();
                image.src = "lund.jpg";
                image.onload = function(){
                    context.drawImage(image, 160, 130);
                }

                //box
                context.strokeStyle = "#000000";
                context.strokeRect(20, 50, 490, 290);
            }
        drawScreen();
        }
    </script>
</head>
<body>
<div style="position:absolut;top:50px;left:50px;">
    <canvas id="canone" width ="500" height ="300">
        your browser does not support html5
    </canvas>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I did test it, and misspelling canvasSupport is indeed the problem.

    What exactly do you mean by “I looked for errors several times?” You need to be loading up your JavaScript error console (ctrl-shift-J on Chrome or Firefox) to see what gets printed there; functions not being defined (because you put the wrong name) is pretty easy to debug at that point.

    • 0