[Bug] "Failed to get WebGL context" error spam while painting on devices without hardware acceleration

[kekneus373]

Description:
On devices where hardware acceleration is disabled (e.g., webgl: Disabled in chrome://gpu), JS Paint repeatedly triggers a "Failed to get WebGL context. You may need to refresh the web page, or restart your computer." error message.

This is not just a nuisance; it lowkey prevents usage. The error dialog appears for every single pixel drawn, making it impossible to paint. The basic drawing tools like lines and spray paint function correctly despite the error, although the pencil, brush, ellipse, polygon and rounded rectangle do not appear to be responsive.

Steps to Reproduce:

1. Disable hardware acceleration in the browser (or use a device where WebGL is forced off, like a very old PC).
2. Open JS Paint.
3. Attempt to draw with the mentioned "broken" tools.
4. Observe the error dialog appearing repeatedly with every stroke/pixel.

Proposed Solutions:
I unerstand that WebGL use is hardcoded and does not affect users of post-2010 devices, so I I suggest one of the following approaches to make it easy and fair for everybody:

1. Remove the Error Popup: Simply remove the code that triggers the error dialog.
2. Session-Only Warning: If the error must be logged, display the popup only once per session, rather than on every interaction / tool change.
3. Silent Fallback: Log the warning to the console (console.warn) but do not interrupt the user workflow with a modal dialog.

Allegedly, these 3 solutions should be relatively easy to implement.

Also I believe it's worth noting this statement in the project's README:

▼ Electron app limitations:

• Minor details:
  • WebGL error messages tell you to refresh without offering a way to reload; also, calling the app a web page feels unpolished

Ig it's a good time to address the issue? 🙂

Expected Behavior:
The application should detect the lack of WebGL support, switch to a fallback mode silently (or with a single startup notification), and allow the user to paint without interruption.

Environment:

• Browser: Brave 151.
• WebGL Status: Disabled, Unavailable.
• OS: NixOS 26.05 running XFCE under X11.
• GPU: ATI Radeon X1300 Pro (no H/W acceleration possible)
• _{This is a retro build}

If you find the issue relevant, consider leaving a like or commenting 👍

Some pictures of the error + PC specs

[kekneus373]

I hope you don't mind clanker give us some tips (I'm not a coder) 😉

where is "failed to get webgl context. you may need to refresh the web page, or restart your computer" string in the code? and where is a popup with it on the screen being called?

DeepWiki Q&A with Code Context for Repository: 1j01/jspaint

Q1

where is "failed to get webgl context. you may need to refresh the web page, or restart your computer" string in the code? and where is a popup with it on the screen being called?

Answer

Answer

The string "Failed to get WebGL context. You may need to refresh the web page, or restart your computer." appears in src/image-manipulation.js in three places, each calling show_error_message() to display it as a popup.

---

Occurrences of the string

1. initWebGL() — called when canvas.getContext("webgl", ...) throws an error or returns null: jspaint:1405-1418

2. init_webgl_stuff() — a slightly different wording ("The WebGL context was lost...") is shown after the webglcontextlost event fires and isn't restored within 3 seconds: jspaint:1497-1506

3. draw_polygon_or_line_strip() — the exact same string is shown if gl is falsy when trying to draw a polygon/line strip: jspaint:1565-1570

Where the popup is triggered from

All three call show_error_message(...), which is imported from functions.js: jspaint:6-6

This function is what actually creates/displays the popup on screen (it's defined in src/functions.js, not shown in the indexed snippets here, but it's imported and used consistently across the codebase as the standard way to show an error dialog to the user).

How WebGL initialization is invoked

• init_webgl_stuff() is exported and calls initWebGL(op_canvas_webgl) on startup jspaint:1486-1494 , so if getContext("webgl") fails at app startup, you'll see the first form of the error message.
• The webglcontextlost/webglcontextrestored listeners are attached in that same function, covering the case of losing the context mid-session (e.g., due to a GPU driver crash or switching virtual desktops) jspaint:1497-1520 .
• draw_polygon_or_line_strip() is the actual drawing routine used for line/polygon rendering; if gl was never successfully initialized (or was lost and not yet restored), this guard fires the error again at draw time jspaint:1565-1570 .

Notes

• I don't have the source of show_error_message() itself in the indexed context (only its import), so I can't show you the exact popup/dialog rendering code (likely uses msgbox.js based on the wiki's architecture overview, but I can't confirm this directly). If you need to see that implementation, a full Devin session could pull up src/functions.js and src/msgbox.js in full.
• The tracky-mouse snippet mentioning WebGL2/context loss is part of an unrelated third-party face-tracking library bundled in lib/tracky-mouse/, and does not use or reference the jspaint error string — it's included in the index due to surface-level similarity around "WebGL context" but is a separate system.

Wiki pages you might want to explore:

• Core Architecture (1j01/jspaint)

Citations

File: src/image-manipulation.js (L6-6)

import { cancel, deselect, detect_monochrome, show_error_message, undoable, update_title } from "./functions.js";

File: src/image-manipulation.js (L1405-1418)

function initWebGL(canvas) {
	try {
		gl = canvas.getContext("webgl", { antialias: false });
	} catch (error) {
		// TODO: reload button for Electron app
		show_error_message("Failed to get WebGL context. You may need to refresh the web page, or restart your computer.", error);
		return;
	}

	if (!gl) {
		// TODO: reload button for Electron app
		show_error_message("Failed to get WebGL context. You may need to refresh the web page, or restart your computer.");
		return;
	}

File: src/image-manipulation.js (L1486-1494)

export function init_webgl_stuff() {

	tessy = initTesselator();

	op_canvas_webgl = document.createElement("canvas");
	op_canvas_2d = document.createElement("canvas");
	op_ctx_2d = op_canvas_2d.getContext("2d");

	initWebGL(op_canvas_webgl);

File: src/image-manipulation.js (L1497-1520)

	op_canvas_webgl.addEventListener("webglcontextlost", (e) => {
		e.preventDefault();
		window.console?.warn("WebGL context lost");
		clamp_brush_sizes();

		warning_tid = setTimeout(() => {
			// TODO: reload button for Electron app
			show_error_message("The WebGL context was lost. You may need to refresh the web page, or restart your computer.");
		}, 3000);
	}, false);
	op_canvas_webgl.addEventListener("webglcontextrestored", () => {
		initWebGL(op_canvas_webgl);

		window.console?.warn("WebGL context restored");
		clearTimeout(warning_tid);

		clamp_brush_sizes();

		// brushes rendered using WebGL may be invalid (i.e. invisible) since the context was lost
		// invalidate the cache(s) so that brushes will be re-rendered now that WebGL is restored
		$G.triggerHandler("invalidate-brush-canvases");

		$G.triggerHandler("redraw-tool-options-because-webglcontextrestored");
	}, false);

File: src/image-manipulation.js (L1565-1570)

function draw_polygon_or_line_strip(ctx, points, stroke, fill, close_path) {
	if (!gl) {
		// TODO: reload button for Electron app
		show_error_message("Failed to get WebGL context. You may need to refresh the web page, or restart your computer.");
		return; // @TODO: don't pollute brush cache with empty brushes (also maybe fallback to 2D canvas rendering)
	}