Create 2d context *without* canvas

Question

I am currently looking for a way to create a canvas 2d rendering context without actually having a canvas element on the page. I could dynamically create a canvas element and hide it, but then again I don't want to show the image directly to the user anytime, so there's no point of actually having a canvas element in the page. So I'm basicly looking for something that is similar to

var image = new Image( ); 

but only for canvas 2d rendering context (pseudo code)

var context = new 2dContext( ); 

Is there functionality like this? I wasn't able to find anything like it. Calling

var context = new CanvasRenderingContext2D( ); 

which is the name of the rendering context interface by HTML5 spec just gives me awkward errors in Firefox:

uncaught exception: [Exception... "Cannot convert WrappedNative to function" nsresult: "0x8057000d (NS_ERROR_XPC_CANT_CONVERT_WN_TO_FUN)" location: "JS frame :: http://localhost/ :: <TOP_LEVEL> :: line 25" data: no] 

Answer 1

It is possible to use a canvas without displaying it on the page. You could do the following:

// Create a canvas element var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 400;  // Get the drawing context var ctx = canvas.getContext('2d');  // Then you can do stuff, e.g.: ctx.fillStyle = '#f00'; ctx.fillRect(20,10,80,50); 

Once you've used the canvas, you can of course add it to the document

var element = document.getElementById('canvas_container'); element.appendChild(canvas); 

Or you could make an image from it:

var new_image_url = canvas.toDataURL(); var img = document.createElement('img'); img.src = new_image_url; 

Or you could access the canvas data as values with:

var image_data = ctx.getImageData(0, 0, canvas.width, canvas.height); var rgba_byte_array = image_data.data; rgba_byte_array[0];  // red value for first pixel (top left) in the canvas 

Answer 2

Interestingly enough, if you create a canvas object and store its context in a variable, that variable has its own pointer to the canvas object. Since you can't use getContext("2d") without a canvas, you might as well only have one canvas pointer. If you're like me and hate having a two references to the same object, you could do this:

Original:

var canvas=document.createElement("canvas"); var context=canvas.getContext("2d");  alert(Boolean(context.canvas==canvas));// true. 

What I'm talking about:

var context=document.createElement("canvas").getContext("2d");  alert(context.canvas);// The canvas object. 

Now you can do all of your important canvas stuff through the context variable. After all, context is accessed more often than the canvas variable. When you do need it just reference it through the context:

context.canvas.width=320; context.canvas.height=320; document.body.appendChild(context.canvas); 

And if you don't want to bother with the canvas just leave the variable alone, it's not like you wanted to use it anyway.