0

I found a canvas generator website. I would like to copy the canvas to my local environment for experimental purposes.

Is there a way to inspect it in chrome and export its drawn content only?

lastnoob
  • 646
  • 12
  • 28
  • 1
    Question duplicate, please check https://stackoverflow.com/a/7141590/4050578 – asd123ea Feb 27 '18 at 17:56
  • Thanks! But how do I actually use this technique? I mean I can copy the canvas to the same page by creating another canvas on it... But how do I export it so I can use it in a completely new file and environment? – lastnoob Feb 27 '18 at 19:04
  • Can't copy the canvas context from console :( So I have no idea how to "export" it – lastnoob Feb 27 '18 at 19:29
  • 1
    You can't "export" a canvas's state as markup. You have to export it as an image, and then load the image onto the canvas in your local file. – Patrick Roberts Feb 27 '18 at 19:54
  • So whats the point of using the image in a canvas instead of simply as an image? The edit-ability and stuff? – lastnoob Feb 27 '18 at 19:58

2 Answers2

1

Is there a way to inspect it in chrome and export its drawn content only?

I'm not sure this is exactly what you're looking for, but you can take screenshots of specific HTML nodes in DevTools, including canvas elements.

Try it out at my take a screenshot of a canvas demo.

  1. press cmd+opt+c or ctrl+shift+c to open the elements panel
  2. select the canvas element
  3. press cmd+shift+p or ctrl+shift+p to open the command menu
  4. start typing screenshot and select capture node screenshot

canvas screenshot demo

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
-1

Canvases are graphics that is the result of a javascript code. These results can be exported as gif/jpg/png.

The HTML element is used to draw graphics, on the fly, via JavaScript.

The element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images. w3schools

So to have that as RenderingContext that is the return value of canvas.getContext() you must have the javascript that generated it.

An alternative would be to export the canvas result as gif/jpg/png.

Community
  • 1
  • 1
asd123ea
  • 121
  • 2
  • 13