debugging canvas.

[mrbean]

Hi!,

I am an javascript programmer, but beginner at working with the canvas API.

So I made an canvas with multiple images, not only in the viewport but also outside of the canvas.
I want to debug it, check how much pixels they are out of screen etc.

So I thougt I can convert the canvas to png/jpg. to see how big it is and how much extra pixels they use.

I tried but failed:
Uncaught TypeError: Object #<CanvasRenderingContext2D> has no method 'toDataURL'
Code:

    canvasFrame = document.getElementById('imageFrame');
    canvas = canvasFrame.getContext('2d');
yepnope("image-editor.js");
var img = game.canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

An other option is to select al the images in the canvas and move it a couple of pixels to determinite the location of them. But I don't know how?

thanks anyway

[AndrewGSW]

As the error message indicates, toDataURL doesn't apply to the 2d rendering object, but to the canvas itself - which you've called canvasFrame:

canvasFrame.toDataURL("image/png");

(It's the only significant method that actually applies directly to the canvas.)

BTW game.canvas looks wrong to me - you already have a direct reference to your variable 'canvas'; but perhaps you've named something else 'game.canvas'.

[mrbean]

It works thankss!

But it only show's whats in screen/on viewport.

I want to see the whole canvas, even if it doesn't fit in the canvas.
Any options?

[devnull69]

Afaik (and would not be offended if I was proven wrong) the canvas is represented by its width and height (which is exactly what is visible on screen unless you cover parts of it with another element). The parts you paint outside of those borders are not part of the canvas and will never be taken into account, neither by toDataURL nor by getImageData. This is due to the fact that a canvas is a raster type of element. The "objects" drawn on the canvas are only sets of pixels. Pixels that would end up outside of the canvas will never exist.