Access html5 canvas elements?

#1

I’ve got 2 ( noob ) questions concerning canvases in html5 :

1 ) Are canvases created when you instantiate a bitmap in openfl?

2 ) If yes, is there a simple way to access these canvas elements from JS? ( document.getgetElementById —> output a HTMLCanvasElement ( not a HTMLDivElement )

I would have thought bitmap.name would translate into canvas id , wich would make it searchable in the document hierarchy?

#2

Nevermind me : >

I managed to find canvases in the document browsing through the nodes :

   var canvas = document.getElementById('openfl-content');

var children = canvas.childNodes;

for (var i = 0; i < children.length; i++)
{
	var subChildren = children[i].childNodes;

	for (var j = 0; i < subChildren.length; i++)
	{
		console.info(subChildren[i]);

		if (subChildren[i].nodeName == "CANVAS")
		{
			console.info("<canvas> found!");
			console.info(subChildren[i]);
			console.info(subChildren[i].constructor.name);

                            // do something with this canvas element .....

			return;
		}
	}
}
#3

It depends on the renderer

The default is WebGL, there are off-screen canvas elements created as needed.

Same with canvas, as needed, off-screen canvases are created, then blitted to one canvas element on the DOM

-Ddom is not fully supported, but uses different DOM elements. Each renderer type will generally use a regular HTML Image until you read or write pixels, in which case it will become a CanvasElement, though GL may work with some surfaces as typed arrays

#4

So is there a reliable way to retrieve a canvas or image element in js by setting the id from openfl somehow?

#5

Are you looking for a canvas element that represents the whole OpenFL project, or just a single element? If a single element, may I ask what you want to do with it?

#6

Just a single element, for now i’m calling a JS script that browse through the child nodes in the page and gets canvas elements ( to export in jpeg with FileSaver.js ). It’s working fine except that I have several bitmaps in my project = several canvas in my page, and i’m interested in one of them only.

So it would be handy if i could set the id ( bimap.name --> canvas.id ) form openFL, so i can retrieve it easily from JS, i was thinking

#7

I used FileSaver.js on another project, here’s the code I used at the time:

var byteArray = bitmapData.encode (bitmapData.rect, new JPEGEncoderOptions (75));

#if html5
var buffer:ArrayBuffer = byteArray;
untyped window.saveAs (new Blob ([ buffer ], { type: "image/jpeg" }), "filename.jpg", true);
#else
var fileReference = new FileReference ();
fileReference.save (byteArray, "filename.jpg");
#end

and in the project.xml

<dependency path="Assets/FileSaver.min.js" if="html5" />

It should also work for PNG if you change the MIME type and encode with PNGEncoderOptions instead.

Looks like (maybe?) we could use FileReference to integrate this into OpenFL completely in the future

3 Likes
BitmapData to PNG
Saving image of a movieclip or canvas
#8

Thanks so much, this solution is working like a charm and is much more efficient since i can compose the bitmapData from openFL and pass the output to FileSaver.js without caring about the document nodes… That’s great!