Converting stage canvas into image

I have tried a couple of different methods when attempting to convert the stage canvas into an image.
One of them was:


My goal is to be able to manipulate Snap! from a webhook and have it potentially respond with an image of the stage.

let me tell you a little secret: If you switch to "dev mode" by holding down the shift key while clicking on the Snap! logo:

dev mode

you get an experimental block in the looks category that lets you create a snapshot of the stage and save it as a costume:


Does that help?

Potentially. Will I need to make a new hidden / invisible sprite that switches to this costume and then use the above method?

no, why would you? Any sprite and also the stage can do this.

I need to send the image across the webhook, that's why.
I am using sockets in JavaScript to say for example:

  1. User requests circle to be drawn with param parameters from a website
  2. Circle is drawn on the canvas
  3. Image is sent back

yeah, sure. The screenshot costume gives you a canvas that'll let you do all of that.

OK, thanks. What about all of the junk generated? (It created screenshot, screenshot(1), screenshot(2)...)

The costumes are just a list. You can delete, replace, add items any time just using list blocks.

Ah I see. Here is what I have now, thanks.

How about script pics like this one?

not yet. :slight_smile:

Came across a strange issue that causes an infinite loop within the program...
The culprit:

Not sure why. Probably a bug within the implementation. I believe this has also occurred in the past when I attempted to use Run on a block that returned the result of a JS function call.

The source code:

Nevermind, no return statement.

So, actually, there are ways that are built-in that allow taking pictures of scripts and stages and etc.
For anyone else who is wondering, I looked around through the source and found these 3 functions:
morph.scriptsPicture() returns a canvas element for the blocks in the sprite / stage with a transparent background
morph.fullImage() returns a canvas element for a group of blocks with a transparent background or of the sprite / stage
morph.fullImageClassic() seems to be the same as above except if used on the stage it will show everything, not just the background

As for how I got the morphs, sent ring morphs have an expression value (that when the ring is empty, is an array with 1 element, the ring itself)
And this refers to the current sprite. I just passed my [stage] to get the stage but there might be a property for it

To get the stage without the my block, use this.parentThatIsA(StageMorph) (my [stage] probably invokes that method).

Thanks. Are there any official/unofficial docs for these functions aside from reading source code and console output?

Not that I know of.