Screenshot without background for HTML5

Mond · June 18, 2026, 12:50am

Hi. I have a question about the screenshot library.

GitHub - britzl/defold-screenshot: Screenshot extension for the Defold game engine · GitHub

I’m trying to use it to capture a part of the screen but without the background, then save the image so that I can later use it as a texture when loading the players screenshots. This works just fine on the simulator by setting the render clear color alpha to 0.

However, when I run the HTML5 build, it still includes the background in the resulting png. Does anyone know why that could be? Is there any way to take a backgroundless screenshot for HTML5?

britzl · June 18, 2026, 1:32pm

The HTML5 version uses a slightly different approach and creates an offscreen canvas to which it renders the entire screen and then saves the bytes:

github.com/britzl/defold-screenshot

screenshot/lib/web/lib_screenshot.js

master

// https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html

var LibScreenshot = {
	screenshot_on_the_next_frame: function(callback, x, y, w, h) {
		var requestAnimationFrameSub = window.requestAnimationFrame;
		window.requestAnimationFrame = function(f) {
			w = w || canvas.width;
			h = h || canvas.height;

			var hidden_canvas = document.createElement("canvas");
			hidden_canvas.style.display = "none";
			document.body.appendChild(hidden_canvas);
			hidden_canvas.width = w;
			hidden_canvas.height = h;

			var context = hidden_canvas.getContext("2d");
			var sx = x;
			var sy = canvas.height - (y + h);
			var sw = w;
			var sh = h;

This file has been truncated. show original

It might be possible to modify this bit to get the result you want, but I’m not entirely sure where to start.

Mond · June 19, 2026, 1:04pm

I see. Seems like this is going to be a little more complicated than I thought. I might just settle for what I have now and revisit this later. Thanks!