ansaurus

Question

Answer 1

A:

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.

Nick Presta 2010-07-22 01:50:17

No. still blank canvas. I added alert('poblem'); to the else blockIs my copy of FF hacked or my computer hacked?

Don Don 2010-07-22 02:24:49

How to test if jquery is actually functioning correctly? tks.

Don Don 2010-07-22 02:25:42

It works with Chrome 5.0. But jquery is so freaking picky?The following code won't work with firebug lite on chrome thouit complained about undefined$(document).keydown(function(e) { // console.log(e.keycode); alert(e.keycode);})

Don Don 2010-07-22 03:42:37

Answer 2

A:

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

Adam Wiggall 2010-08-27 14:36:17

ansaurus

tags:

views:

answers:

Simple HTML5 canvas and jquery question

related questions