Merge pull request #36075 from muiroc/canvas_transparent_v2

Allow per pixel transparency in javascript platform

3 files changed, 25 insertions, 2 deletions

diff --git a/doc/classes/OS.xml b/doc/classes/OS.xml
index 21c8dcd20a..e0f73df1bf 100644
--- a/doc/classes/OS.xml
+++ b/doc/classes/OS.xml
@@ -960,7 +960,7 @@
 			If [code]true[/code], the window background is transparent and window frame is removed.
 			Use [code]get_tree().get_root().set_transparent_background(true)[/code] to disable main viewport background rendering.
 			[b]Note:[/b] This property has no effect if [b]Project > Project Settings > Display > Window > Per-pixel transparency > Allowed[/b] setting is disabled.
-			[b]Note:[/b] This property is implemented on Linux, macOS and Windows.
+			[b]Note:[/b] This property is implemented on HTML5, Linux, macOS and Windows.
 		</member>
 		<member name="window_position" type="Vector2" setter="set_window_position" getter="get_window_position" default="Vector2( 0, 0 )">
 			The window position relative to the screen, the origin is the top left corner, +Y axis goes to the bottom and +X axis goes to the right.
diff --git a/platform/javascript/os_javascript.cpp b/platform/javascript/os_javascript.cpp
index 34dce90b6b..13615de65b 100644
--- a/platform/javascript/os_javascript.cpp
+++ b/platform/javascript/os_javascript.cpp
@@ -220,6 +220,20 @@ void OS_JavaScript::get_fullscreen_mode_list(List<VideoMode> *p_list, int p_scre
 	p_list->push_back(OS::VideoMode(screen.width, screen.height, true));
 }
 
+bool OS_JavaScript::get_window_per_pixel_transparency_enabled() const {
+	if (!is_layered_allowed()) {
+		return false;
+	}
+	return transparency_enabled;
+}
+
+void OS_JavaScript::set_window_per_pixel_transparency_enabled(bool p_enabled) {
+	if (!is_layered_allowed()) {
+		return;
+	}
+	transparency_enabled = p_enabled;
+}
+
 // Keys
 
 template <typename T>
@@ -886,10 +900,14 @@ Error OS_JavaScript::initialize(const VideoMode &p_desired, int p_video_driver,
 
 	EmscriptenWebGLContextAttributes attributes;
 	emscripten_webgl_init_context_attributes(&attributes);
-	attributes.alpha = false;
+	attributes.alpha = GLOBAL_GET("display/window/per_pixel_transparency/allowed");
 	attributes.antialias = false;
 	ERR_FAIL_INDEX_V(p_video_driver, VIDEO_DRIVER_MAX, ERR_INVALID_PARAMETER);
 
+	if (p_desired.layered) {
+		set_window_per_pixel_transparency_enabled(true);
+	}
+
 	bool gles3 = true;
 	if (p_video_driver == VIDEO_DRIVER_GLES2) {
 		gles3 = false;
@@ -1315,6 +1333,7 @@ OS_JavaScript::OS_JavaScript(int p_argc, char *p_argv[]) {
 	window_maximized = false;
 	entering_fullscreen = false;
 	just_exited_fullscreen = false;
+	transparency_enabled = false;
 
 	main_loop = NULL;
 
diff --git a/platform/javascript/os_javascript.h b/platform/javascript/os_javascript.h
index 5c02a292ee..65a18830ed 100644
--- a/platform/javascript/os_javascript.h
+++ b/platform/javascript/os_javascript.h
@@ -46,6 +46,7 @@ class OS_JavaScript : public OS_Unix {
 	bool window_maximized;
 	bool entering_fullscreen;
 	bool just_exited_fullscreen;
+	bool transparency_enabled;
 
 	InputDefault *input;
 	Ref<InputEventKey> deferred_key_event;
@@ -123,6 +124,9 @@ public:
 	virtual void set_mouse_mode(MouseMode p_mode);
 	virtual MouseMode get_mouse_mode() const;
 
+	virtual bool get_window_per_pixel_transparency_enabled() const;
+	virtual void set_window_per_pixel_transparency_enabled(bool p_enabled);
+
 	virtual bool has_touchscreen_ui_hint() const;
 
 	virtual bool is_joy_known(int p_device);