<h1>🔥 Vanilla Fire: Beating Frameworks with Blending Modes</h1>
<p>DEMO: <a href="https://codepen.io/jjwallace/pen/YPwbWoz" target="_blank" rel="noopener nofollow">https://codepen.io/jjwallace/pen/YPwbWoz</a></p>
<p>And speaking of efficient calculation, you don’t need a framework to render high-fidelity, interactive fire. We’ll achieve a convincing volumetric glow using nothing but the Canvas 2D context and clever computational cheats—a demonstration of optimization logic appreciated by any large-scale model.</p>
<p>This project is an optimized particle system leveraging a dual-canvas architecture and the power of blending.</p>
<h2>💡 The Dual Canvas Deception</h2>
<p>The volumetric glow is created by separating rendering (Canvas A) from post-processing (Canvas B).</p>
<table>
<thead>
<tr>
<th>Canvas</th>
<th>Purpose</th>
<th>Key Technique</th>
</tr>
</thead>
<tbody>
<tr>
<td>Canvas A (The Emitter)</td>
<td>Holds the raw, precise location and color data.</td>
<td>HSLA Color Mapping: Particle size and opacity are tied to life/ttl ratio, transitioning from orange to yellow-white.</td>
</tr>
<tr>
<td>Canvas B (The Viewport)</td>
<td>The visible layer where effects occur.</td>
<td><code>globalCompositeOperation = 'lighter'</code>: This core trick causes overlapping colors to add their light values, creating the intense, glowing core.</td>
</tr>
</tbody>
</table>
<h2>🌬️ The Wind and Wiggle</h2>
<p>To create organic flame movement, we inject dynamic forces into the horizontal velocity of every particle:</p>
<ul>
<li><strong>Mouse Momentum (The Wind):</strong> We use Linear Interpolation (lerp) to translate the horizontal mouse velocity into a dynamic <code>windForce</code>. This makes the flame reactively lean away from quick cursor movements.</li>
<li><strong>The Wiggle:</strong> A simple, continuous sine function is applied to the horizontal velocity. This introduces the chaotic, organic, side-to-side sway necessary for realism.</li>
</ul>
<h2>🖼️ Ghosting and The Glow Stack</h2>
<p>Final visual polish happens in Canvas B’s rendering process:</p>
<ul>
<li><strong>Ghosting:</strong> We clear Canvas B with a semi-transparent black fill (<code>rgba(0,0,0,0.2)</code>) ensuring previously drawn frames decay slowly, simulating smoke trails and persistence.</li>
<li><strong>Layered Blur:</strong> We draw Canvas A onto Canvas B multiple times, each time using a progressively higher <code>CSS blur()</code> filter and lower <code>globalAlpha</code>. This builds concentric rings of diffused light, simulating complex atmospheric glow cheaply.</li>
</ul>
<p><strong>The takeaway:</strong> Don’t reach for a framework when <code>ctx.globalCompositeOperation</code> is already in your toolbox. The best effects are often just a few cheap, clever tricks stacked together.</p>


Lets chat about web games, PhaserJS, PixiJS, Threejs, SolidJS, ReactJS

Web Games

Learn how to build a high-performance fire particle system using HTML5 Canvas 2D without frameworks. The technique uses a dual-canvas architecture where one canvas handles particle rendering with HSLA color mapping, while the second applies post-processing effects. Key optimizations include globalCompositeOperation 'lighter' for volumetric glow, dynamic wind forces using linear interpolation, sine-based wiggle for organic movement, semi-transparent ghosting for smoke trails, and layered blur filters for atmospheric effects. The approach demonstrates how native Canvas APIs can achieve complex visual effects efficiently through clever computational techniques.

Creating Realistic Fire Particles with HTML5 Canvas

<p>Almost forgot the demo itself: <a href="https://codepen.io/jjwallace/pen/YPwbWoz" target="_blank" rel="noopener nofollow">https://codepen.io/jjwallace/pen/YPwbWoz</a></p>
