CODEWITHSUNDEEP
jqueryhtmlcanvas
Don Don
Don Don

Reputation: 189

Can't draw on HTML5 canvas using jQuery

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>

Upvotes: 2

Views: 11724

Answers (6)

Bill
Bill

Reputation: 1

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

Upvotes: 0

muni
muni

Reputation: 1

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

        });

Upvotes: 0

Erik
Erik

Reputation: 935

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');

Upvotes: 4

treppo
treppo

Reputation: 547

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>

Upvotes: 0

Adam Wiggall
Adam Wiggall

Reputation: 19

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...

Upvotes: 1

Nick Presta
Nick Presta

Reputation: 28705

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.

Upvotes: 2

Related Questions