I’d like to have an HTML canvas context that I can paint to and read off-screen (in this example, writing text and reading the shape that is created, but it’s a general question). I may also want to use a canvas as an off-screen frame-buffer.
I suppose I could create a hidden DOM element but I’d rather create it from JavaScript (I may want to create and destroy a number of canvas at runtime).
Possible?
Advertisement
Answer
You can create a new canvas
element with document.createElement
:
var canvas = document.createElement('canvas');
and then get the context from it. Just make sure you set the width
and height
. You don’t have to add the canvas to the tree in order to make it work:
But you definitely have to create that node. You could create a function for that though:
function createContext(width, height) { var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; return canvas.getContext("2d"); }
But that is where my competency ends… whether you can somehow transfer a context to another context or canvas, I don’t know…