Edit the canvas CSS from OpenFL

Haxe
#1

Hello.

I am making a game in Haxe+OpenFL, exporting to Canvas HTML5 and I wanted to blur the game when it loses focus.

I can use openFL’s events to detect the focus in and focus out but I want to add the css tag filter:blur(5px); to the canvas style on focus lost and then remove it when the player focuses again.

Is there a simple way to do this?

Thank you for your help!

1 Like
#2

Maybe something like…

var div = js.Browser.document.getElementById ("openfl-content");
div.style = "filter:blur(5px);";
1 Like
#3

Close, but style is defined as:

var style(default,null) : CSSStyleDeclaration;

so it throws this compile error.

Cannot access field or identifier style for writing

but is a great hint. Will look into the Browser class to see if I can hack my way into the HTML (Or maybe just untype js my way to victory?)

Untyped FTW:

Unblur:
untyped __js__('document.getElementById("openfl-content").style = "filter:blur(0px);"')

Blur:
untyped __js__('document.getElementById("openfl-content").style = "filter:blur(5px);"');

#4

Oh, I think the typed way of doing it looks like this:

Browser.document.getElementById ("openfl-content").style.setProperty ("filter", "blur(5px)");

… but there’s obviously a few ways to do it! :grinning: