Home/ Questions/Q 8940935
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T11:10:34+00:00

I am trying to create a javascript canvas using an external javascript file. but

  • 0

I am trying to create a javascript canvas using an external javascript file. but for some reason when I run my code instead of getting the canvas I have coded I just get a white block. The chrome debugger finds no problem with my code so I am lost any help would be greatly appriciated.

This is my index file

<!doctype html>
    <html>
        <head>
            <title>Lab1</title> <script type="text/javascript" src="javascript/canvas.js"></script>
        </head>
        <body>
            <canvas id="canvas" width="800" height="600">
                Your browser does not support the canvas tag
            </canvas>
            <p>This is a simple 'Hello World' lab tutorial using the HTML5 canvas.</p>
        </body>
    </html>

And this is my javascript file

// check to see if the browser supports 
// the addEventListener function 
if(window.addEventListener) 
{
window.addEventListener 
( 
'Load', // this is the load event 
onLoad, // this is the event handler we are going to write 
false // useCapture boolean value 
);
}

// the window load event handler 
function onLoad() 
{ 
var canvas; 
var context;

// this function will initialise our variables 
function initialise() 
{
    // Find the canvas element using its id attribute. 
    canvas = document.getElementById('canvas'); 
    // if it couldn't be found 
    if (!canvas) 
    { 
        // make a message box pop up with the error. 
        alert('Error: I cannot find the canvas element!'); 
        return; 
    }
    // check if there is a getContext function 
    if (!canvas.getContext) 
    { 
        // make a message box pop up with the error. 
        alert('Error: no canvas.getContext!'); 
        return; 
    }
    // Get the 2D canvas context. 
    context = canvas.getContext('2d'); 
    if (!context) 
    { 
        alert('Error: failed to getContext!'); 
        return; 
    }
}

    // this function will actually draw on the canvas 
    function draw() 
    { 
        // set the draw fill style colour to black 
        context.fillStyle = "#000000"; 
        // fill the canvas with black 
        context.fillRect(0,0,canvas.width,canvas.height); 
        // choose a font for our message 
        context.font = "40pt Calibri"; 
        // set the draw fill colour to white 
        context.fillStyle = "#ffffff"; 
        // draw the text at the specified position 
        context.fillText("Hello World!", 150, canvas.height); 
    }
// call the initialise and draw functions 
initialise(); 
draw(); 
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The event type needs to be written lowercase: load, i.e.

    window.addEventListener('load', onLoad, false);

    A list of available event types is referenced for example by Mozilla.

    Just a hint: You can set a breakpoint in your onLoad function with your Chrome debugger to make sure that it is called by your event listener. It was not and that drew my attention to your addEventListener method call.

    • 0