{
  "id": 10547189,
  "title": "Cheap bloom for a Canvas 2D game in 8 lines (no WebGL)",
  "url": "https://urgent.news/2026/09/28/cheap-bloom-for-a-canvas-2d-game-in-8-lines-no-webgl",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-28T22:27:15.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/nightdrivelabs/cheap-bloom-for-a-canvas-2d-game-in-8-lines-no-webgl-4jah"
  },
  "original_language": "en",
  "account": "Adding a soft glow to a Canvas 2D game is challenging, as the usual method involves WebGL and post-processing shaders. However, for a Canvas 2D boss-rush game, the goal was to achieve this effect without switching to WebGL. The solution was found by using the 2D context itself, which required only eight lines of code. Bloom consists of three steps: a bright pass, blurring, and adding the blurred image back to the original frame.\n\nTo implement this, a quarter-resolution canvas is created, as blurring is the expensive part, and a lower resolution has fewer pixels. The code first checks if a blurred canvas exists; if not, it creates one and sets its width and height based on the original canvas dimensions. The global composite operation is set to \"copy,\" and a filter with brightness, contrast, and blur properties is applied. This creates the bright pass and blur in one step.\n\nThe blurred image is then drawn onto the original canvas using drawImage, and the global composite operation is changed to \"lighter,\" making the bloom additive. The alpha is set to 0.4, so the bloom is at 40% opacity. Finally, the canvas context is restored.\n\nThe code includes a feature to test if the browser supports the filter property, as not all browsers do. This ensures that the effect works correctly and prevents the whole screen from becoming washed out if the feature is not available. The bloom effect was found to be negligible in cost compared to the game logic, with the game still running at 122-145 fps even with a 4x CPU throttle.",
  "summary": "Neon games look flat without bloom: the soft light that bleeds around bright things. The usual advice is \"switch to WebGL and write a post-process shader\". For my Canvas 2D boss-rush game I wanted the glow without porting the renderer, so I did it with the 2D context itself. The whole pass is 8 lines and costs almost nothing (numbers at the end). The idea Bloom is three steps: Bright pass : keep…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}