Accessing sprites from Canvas via JavaScript directly?

Haxe
#1

How would I access sprites in HTML5 Canvas directly from JavaScript? I need to access them to apply webGL effects directly, would that be possible? any idea?

#2

Two ideas for HTML5 may be to use either OpenGLView to perform your own OpenGL render code (you could use BitmapData there to manipulate a canvas surface) or maybe DOMSprite if you do -Ddom to use completely custom DOM code, but for now, perhaps GL view would be a better place to start if custom shaders isn’t enough?

#3

I think that DOMSprite is easier than perform my own OpenGL render code ?, where can I find an example about using DOMSprite with -Ddom ?

As for custom shaders, I only could change the color of sprites, but could not do any glow effect, unless you have a simple example to do so?

#4

The DOMSprite object works similar to a Sprite, but takes an HTML5 DOM element in the constructor, which is placed within the OpenFL display list hierarchy, so it means you could do ordinary Haxe/JS mixed with other OpenFL objects.

I have not implemented glow in a shader before, but it looks like (reading some articles) it is a matter of implementing blur, but masked to apply only to certain objects or edges

#5

I’ve got great answer based on openfl._internal.renderer.RenderSession which uses CanvasRenderContext

So, as I’ve got glow effect achieved via CanvasRenderContext , I still need to apply color transform to the answer above, I tried fillStyle of CanvasRenderContext but didn’t work, I also tried custom shaders but didn’t work also.

then, I thought I can use GLRenderContext to apply shaders on bitmap to achieve color transform effect as:

public override function __renderCanvas (renderSession:RenderSession):Void {

    var gl= renderSession.gl;

but, renderSession.gl is undefined, shall I add special flag other than -Dfdb when compiling? or shall I try something else?

#6

Color transform works if you use bitmapData.draw, could you do that first to get the tint color you need?

#7

I will check bitmapData.draw, but why renderSession.gl is undefined? is it still not implemented?

#8

When you use HTML5 -Dcanvas, it has a context property instead

#10

I have tried -Ddom to work with DOMSprite, but the performance was very poor, so I think I will stick to bitmap.draw option, thanks