<canvas> in greasemonkey

Question

I've created a <canvas>, in the variable canvas, but I can't seem to draw to it. I can see the blank canvas on the page, but it's blank.

alert(ctx);
ctx.fillStyle = "rgb(50,50,50)";
ctx.fillRect(10,10, 55,50);
alert("done");

The first alert says [object CanvasRenderingContext2D], and I do see the "done" alert, but the canvas is still blank. There are no relevant errors in the error console.

edit: Just to make sure, I pasted the script into a stand alone html page, and it worked as expected.

Answer 1

Canvas works fine for me in Greasemonkey. Post your Greasemonkey script; and what browser are you using?

Answer 2

I've figured out what the problem is, and I'm not sure if it's really a problem in firefox/greasemonkey.

First of all, the script is written for a private site, you'd need an invite to to see the page that it's on, so I posted what I thought was the relevant part of the script, but turns out it wasn't.

The problem was that after creating the canvas, I modified (+=) the .innerHTML of the content div (which I know is bad practice, but it works for greasemonkey that doesn't need to work in every browser). I imagine that this would completely destroy the previous tree, and then recreate it with the new content string given, which would mean that the canvas I had a reference to was no longer the one being displayed on the page, it was one that had been recreated, so my reference was meaningless, and hence when I drew to it, I got no error, but saw nothing. I imagine that if I used that reference to add it back to the page, I should have seen what I'd drawn.

The problem was fixed by not appending to the .innerHTML, I imagine that if I use the proper DOM methods to create the div that I want to add, and then append it to the tree, I should not have this problem (have not yet tested this, though).