Can't draw on HTML5 canvas using jQuery

Question

The following code won't load the green rectangle in the canvas. This is my very first time trying out jQuery (either it sucks or me sucks), why such a simple thing is not working, I'm baffled. My web browser is Firefox 3.6. Playing with jQuery because there's another jQuery-driven piece of code that could be quite useful...

<html>
<head>
<style type="text/css">
 #canvas {
 border:1px solid black;
 }
</style>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"/>
<script type="text/javascript">
// have also tried
<script type="application/javascript">

  $(function() {
 var canvas = $("#canvas")[0];
 var ctx = canvas.getContext("2d");

 // ctx.clearRect(0,0,300,300);
 ctx.fillStyle = "green";
 ctx.fillRect(0,0,50,50);

 });

</script> 
</head>

<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

Try wrapping your code in a plain old anonymous function? jQuery is really not much use with ` — MooGoo, Jul 22 '10 at 01:43
In the future, don't use `<` and `
` to display your code. Just indent it all by 4 spaces and it will be in a code block and syntax highlighted too — Jamie Wong, Jul 22 '10 at 01:45

score 4 · Answer 1 · answered Dec 12 '11 at 18:19

4

Getting the canvas element by using jQuery won't work. You can't use the getContext() method on the jQuery object. Instead of:

var canvas = $("#canvas");

You should use (if "draw" was the ID of the canvas element):

var canvas = document.getElementById('draw');

answered Dec 12 '11 at 18:19

Erik

935
11
28

2

To get the native DOM element you can also write: `var canvas = $("#canvas")[0];` or `var canvas = $("#canvas").get(0);` – Matt Schwartz Dec 21 '12 at 06:41

Nick Presta · Answer 2 · 2010-07-22T01:55:26.700

2

Try this:

<script type="application/javascript">
    $(document).ready(function() {
        var canvas = $("#canvas")[0];
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            // Choose a color
            ctx.fillStyle = color;
            ctx.strokeStyle = color;
            ctx.fillRect(0, 0, 50, 50);
        } else {
            // Browser doesn't support CANVAS
        }
    });
</script>

That should work as expected. I suspect you were missing the $(document).ready() bit.

edited Jul 22 '10 at 01:55

answered Jul 22 '10 at 01:50

Nick Presta

28,134
6
57
76

No. still blank canvas. I added alert('poblem'); to the else block Is my copy of FF hacked or my computer hacked? – Don Don Jul 22 '10 at 02:24
How to test if jquery is actually functioning correctly? tks. – Don Don Jul 22 '10 at 02:25
It works with Chrome 5.0. But jquery is so freaking picky? The following code won't work with firebug lite on chrome thou it complained about undefined $(document).keydown(function(e) { // console.log(e.keycode); alert(e.keycode); }) – Don Don Jul 22 '10 at 03:42

score 1 · Answer 3 · answered Aug 27 '10 at 14:36

Don Don,

You need to make two small changes.

First remove the [0] from this line,

var canvas = $("#canvas")[0]

Second, take that [0] and add it to the if statement,

if (canvas[0].getContext) {

And add it to the assignment of ctx

var ctx = canvas[0].getContext("2d");

Alternatively assign it to a variable before you test for it.

var canvas = $("#canvas"), ctx = canvas[0].getContext("2d");
if (ctx) {

And you should be good to go...

score 0 · Answer 4 · answered Mar 08 '13 at 11:19

   $(document).ready(function() {
                var ctx = $("#canvas")[0].getContext("2d");
                // Choose a color
                ctx.fillStyle = "#00ff00";
                ctx.strokeStyle = "#ff0000";
                ctx.fillRect(10, 10, 200, 200);

        });

score 0 · Answer 5 · edited Aug 25 '13 at 21:06

0

OK, I duplicate the problem in IE and solve it. The reason is the script tag must use the explicit close tag. So change

<script type="text/javascript" src="/js/jquery-1.4.2.min.js" />

to:

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>

(browser does not understand <script ... />)

there is another syntax issue is the canvas element does not have close tag, but browser (IE) seems to understand it. Not sure FF

edited Aug 25 '13 at 21:06

Dave Hogan

3,201
6
29
54

answered Aug 25 '13 at 20:48

Bill

1

and there is a good reason for that - http://stackoverflow.com/questions/69913/why-dont-self-closing-script-tags-work – scibuff Feb 10 '14 at 13:39

score 0 · Answer 6 · answered Aug 27 '11 at 19:12

You should close the canvas tag and as Nick already said, you should definitely use the jQuery $(document).ready() function:

<html>
<head>
<style type="text/css">
    #canvas {
        border:1px solid black;
    }
</style>

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"/>
<script type="text/javascript">
    $(document).ready(function() {
        var canvas = $("#canvas")[0];
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            // Choose a color
            ctx.fillStyle = "#000000";
            ctx.strokeStyle = "#000000";
            ctx.fillRect(0, 0, 50, 50);
        } else {
            // Browser doesn't support CANVAS
        }
    });
</script>
</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>

Can't draw on HTML5 canvas using jQuery

6 Answers6