CODEWITHSUNDEEP
javascripthtmlcanvaskineticjs
Jelle Vergeer
Jelle Vergeer

Reputation: 1046

Capture full canvas image

I am looking for a way to capture the complete canvas (including elements that are moved outside the canvas) to an image. I am using the KineticJS library and I am aware of the toDataURL function. The problem is that the image is clipped to the canvas bounds.

As a workaround I thought to copy all elements on the canvas to a temporary hidden canvas which is big enough to fit all elements and then use the toDataURL function. I was wondering if there is a cleaner approach?

Upvotes: 2

Views: 226

Answers (2)

SoluableNonagon
SoluableNonagon

Reputation: 11755

I would agree with Alvin, you could just resize the canvas, here's how:

 stage.setWidth(window.innerWidth);  // inner width of your window
 stage.setHeight(window.innerHeight); // inner height of your window
 stage.draw();    //redraw

This would resize your stage to the width and height of your window, but this would not account for the possibility that elements would be farther than your window, but you can just modify the number inside the .set functions to account for the farthest right/left one.

If you were looking for a quick way to copy all elements in your canvas to another stage you could serialize it:

  var json = stage.toJSON();
  var newStage = Kinetic.Node.create(stageJson, 'newContainer');

Upvotes: 0

AlvinfromDiaspar
AlvinfromDiaspar

Reputation: 6814

Interesting problem. I like the temporary canvas idea. Also, you could just resize the main canvas, apply an offsetting translation to all child elements, capture the image, then reverse-translate and resize back. This wouldn't be any more complex than copying to a hidden canvas. Plus, the single canvas approach would be more memory efficient.

Just my 3 cents.

Upvotes: 2

Related Questions