CODEWITHSUNDEEP
jqueryhtml
Azevedo
Azevedo

Reputation: 2189

HTML5' canvas: $(document).ready(function() - NOT READY

I'm trying to draw inside a canvas with the code bellow. The alert() return undefined. It seems like the document is ready but the canvas is not.

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/myscript.js"></script>
        <link type="text/css" rel="stylesheet" href="css/normalize.css" media="screen" />

        <title></title>
    </head>
    <body>
        <canvas id="space" width="1500" height="1500"></canvas>
    </body>
</html>

myscript.js

$(document).ready(function(){
//$(window).load(function() {


    alert($('#space').id); // returns undefined

    dbCanvas = $('#space');
    context = dbCanvas.getContext('2d');
        // IE: {exception} Object doesn't support property or method 'getContext'
        // FF: TypeError: dbCanvas.getContext is not a function

    context.fillStyle = "rgb(200, 0, 0)";
    context.fillRect(10, 10, 55, 50);

});

Upvotes: 3

Views: 1278

Answers (1)

epascarello
epascarello

Reputation: 207557

Um there is no id property in a jQuery object. That is why it is undefined.

alert($('#space').get(0).id); 
alert($('#space').attr("id"));

and you need to run off DOM for the canvas

dbCanvas = $('#space').get(0);
context = dbCanvas.getContext('2d');

Upvotes: 8

Related Questions