Firebug and Canvas element

[Jesper Rønn-Jensen]

I want to use Firebug to inspect some piecharts (generated as a canvas
element). The Firebug HTML inspector shows the <canvas> element but
there is no content in it.

How can Firebug be improved so that I can see contents of canvas
elements in the HTML inspector?

I have a vague feeling this is not an issue with Firebug, but actually
a limitation in Firefox...


Using Firebug 1.7.2 in Firefox 4.0.1


Kind regards,

Jesper Rønn-Jensen
www.justaddwater.dk

[Jan Honza Odvarko]

On Jun 15, 12:15 pm, Jesper Rønn-Jensen <jespe...@gmail.com> wrote:
> I want to use Firebug to inspect some piecharts (generated as a canvas
> element). The Firebug HTML inspector shows the <canvas> element but
> there is no content in it.
>
> How can Firebug be improved so that I can see contents of canvas
> elements in the HTML inspector?

You can implement new Firebug features as Firebug extension, see a
tutorial here:
http://www.softwareishard.com/blog/category/firebug-tutorial/
But in this case, I am not sure how far you can get.

Honza

[alfonsoml]

The Canvas element is a bunch of pixels, there is no content inside of
it (unless you are creating a "shadow DOM" to help people with screen
readers and the like, but I don't think that this is your problem).

[Jesper Rønn-Jensen]

Thanks for your suggestions.

The specific problem i am actually tryin to solve is this: From one
HTML page, I want to be able to copy/paste a piechart into another
HTML page.

For now, I actually only copy the canvas element without any content.
The piechart disappears when I copy.

Another thing that first surprised me is if you in the Firebug
inspector choose to edit the canvas element, then it will clear all
contents. So again, in my specific example, the piechart would
disappear.

I can see this is not really related to any firebug specific issues.
Instead, it seems like a limitation in the <canvas> element: If i
could describe the element via markup inside <canvas>, I could
probably also see it in Firebug.

I guess that I need something more to solve my problem.

Imagine if I copy-paste a <canvas> element, then in reality, I copied
a <canvas> element followed by a <script> element with the
instructions on how to create my piechart. Like so:

<canvas class="piechart" width="80" height="80" id="canvas1">
<script type="text/javascript">

[javascript to generate a piechart]

</script>

[alfonsoml]

It seems that instead of canvas images you want to use SVG. Those ones
are really DOM elements, so it might be easier to carry your task.

Anyway, I find it strange that it's not possible to copy a canvas as-
is, according to http://stackoverflow.com/questions/6164231/copy-html-canvas-to-clipboard-as-image
it requires some workarounds, but I think that this is a feature that
the browser should support out of the box.

[rick]

you can get the data:image URL by using the canvas object's toDataURL() method, e.g.
document.getElemenById("theCanvasId"),toDataURL();