How to Build a 60 FPS "Noir Flashlight" 2D Browser Game Effect in 6 Lines of Vanilla JS (With One-Shot AI Prompt)

Most people prompting AI to build a 2D stealth or horror browser game make the same mistake: they ask for "dynamic raycast lighting," and the LLM spits out 300 lines of broken vector math or imports a heavy WebGL shader setup that tanks frame rates on mobile browsers.

If you want instant atmospheric lighting in a single-file HTML5 game, tell the AI to use Canvas compositing instead.

The 6-Line "Noir Flashlight" Trick

Inside your main requestAnimationFrame render loop, after drawing your floor tiles, loot, and enemies, drop in this exact pattern using globalCompositeOperation and createRadialGradient:

// 1. Draw darkness on an offscreen lighting canvas (lightCtx)
lightCtx.globalCompositeOperation = 'source-over';
lightCtx.fillStyle = 'rgba(5, 5, 12, 0.96)';
lightCtx.fillRect(0, 0, canvas.width, canvas.height);

// 2. Carve out a soft radial flashlight beam at the mouse/player cursor
lightCtx.globalCompositeOperation = 'destination-out';
const beam = lightCtx.createRadialGradient(mouse.x, mouse.y, 15, mouse.x, mouse.y, 220);
beam.addColorStop(0, 'rgba(0, 0, 0, 1)');
beam.addColorStop(1, 'rgba(0, 0, 0, 0)');
lightCtx.fillStyle = beam;
lightCtx.beginPath();
lightCtx.arc(mouse.x, mouse.y, 220, 0, Math.PI * 2);
lightCtx.fill();

// 3. Stamp the darkness mask onto your main game canvas
ctx.drawImage(lightCanvas, 0, 0);

Why This Works So Well With AI Prompts

1. Zero external dependencies: It runs natively at 60 FPS in every modern browser using the standard HTML5 Canvas 2D API.
2. Instant atmosphere: By rendering enemy "eye glow" sprites after ctx.drawImage(lightCanvas, 0, 0), enemies stay hidden in the dark until only their glowing red eyes—or your flashlight cone—reveal them.
3. One-shot friendly: Including the phrase "Use an offscreen canvas with globalCompositeOperation = 'destination-out' and createRadialGradient for a 2D Noir flashlight mask" in your prompt prevents the AI from hallucinating broken shadow shaders.

⚡ Grab the Full AI Browser Game Pro Pack (Free PDF)

I compiled the exact copy-paste one-shot prompt for this playable 2D Noir stealth game—along with my complete collection of 2D/3D Three.js browser game prompts, universal God-Mode console speed hacks, and FFmpeg trailer scripts—into the AI Browser Game Pro Pack & God-Mode Vault (PDF).

👉 Unlock & Download the Free AI Game Pro Pack Here