Basic JS/HTML5 Canvas Issue

Question

I'm very new to JS with HTML5, and I cannot get a very basic piece of code to work. I have made the canvas, appended it to the body, and tried to write text, but nothing shows up.

 <!doctype html>
<html lang="en">
    <head>
        <meta charset='utf-8'>
        <title>Test Game</title>
    </head>
    <body>
        <script type="text/javascript">
            var CANVAS_WIDTH=480;
            var CANVAS_HEIGHT=320;
            var canvasElement=$("<canvas width='"+ CANVAS_WIDTH +"'height='"+CANVAS_HEIGHT+"'></canvas>");
            var canvas = canvasElement.get(0).getContext("2d");
            canvasElement.appendTo('body');
        </script>
        <script type="text/javascript">
            var FPS = 30;
            setInterval(function(){
                update();
                draw();
            },1000/FPS);
            function update(){

            }
            function draw(){
                canvas.fillStyle = "#000";//Sets colour to black
                canvas.fillText("Sup Bro!",50,50);
            }
        </script>
    </body>
</html>

You should use the developertools (firebug in firefox) then you'd have seen something like "$ is not a function"... @AndreasBjørn There is nothing wrong on the use of jquery here to create a new dom element. — LJᛃ
– LJᛃ, Commented Nov 29, 2013 at 2:11
@LJ_1102 Thanks, removed my comment to avoid confusion for others later on :) — AndreasHassing
– AndreasHassing, Commented Nov 29, 2013 at 2:13

Qantas 94 Heavy · Accepted Answer · 2013-11-29 02:16:03Z

6

You haven't included the jQuery core script before, which is why it is failing. Also, I'd recommend using jQuery functions to add attributes instead, rather than using strings.

<!doctype html>
<html lang="en">
    <head>
        <meta charset='utf-8'>
        <title>Test Game</title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var CANVAS_WIDTH = 480;
            var CANVAS_HEIGHT = 320;
            var canvasElement = $("<canvas>")
                .attr('width', CANVAS_WIDTH)
                .attr('height', CANVAS_HEIGHT);

            var canvas = canvasElement.get(0).getContext("2d");
            canvasElement.appendTo('body');

            var FPS = 30;
            setInterval(function () {
                update();
                draw();
            }, 1000/FPS);
            function update () {
            }
            function draw () {
                canvas.fillStyle = "#000"; // Sets colour to black
                canvas.fillText("Sup Bro!", 50, 50);
            }
        </script>
    </body>
</html>

edited Nov 29, 2013 at 2:16

answered Nov 29, 2013 at 2:04

Qantas 94 Heavy

16k31 gold badges74 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Over a year ago

Thanks! I'm really such a newbie at this, so Its nice to have a quick friendly response!

Qantas 94 Heavy Over a year ago

@Josh: you're welcome. When you have time, it'd be good if you'd take a look at the About page. Note that jQuery is just a library for JavaScript, it's not part of JavaScript itself.

user1693593 Over a year ago

Except that for canvas you need to set width and height with attr or only its css size will be set which doesn't work well with canvas: .attr('width', CANVAS_WIDTH); etc.

Hans · Accepted Answer · 2013-11-29 02:13:26Z

2

I am learning HTML5 as well. Like the previous person said, you are using jQuery ($) without including the library.

Also, from what I've learned, I think it's better to use requestAnimationFrame (https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame) instead of setInterval. If you wish to set FPS, you can put a conditional in the draw loop to check whether it is time to draw the next frame.

function draw(timestamp) {
    requestAnimationFrame(draw);
    if (timestamp - lasttimestamp > 1000 / framerate) {
        lasttimestamp = timestamp - ((timestamp - lasttimestamp) % 1000 / framerate;
        // ... put your drawing code in here
    }
}

answered Nov 29, 2013 at 2:13

Hans

2,8003 gold badges19 silver badges21 bronze badges

1 Comment

Qantas 94 Heavy Over a year ago

+1 If you're doing animation requestAnimationFrame is much more efficient than using setInterval/setTimeout, and also more accurate.

Collectives™ on Stack Overflow

Basic JS/HTML5 Canvas Issue

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related