From 3bfb894b96cfb6e8e75e7da9cecf654eec7b098d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=86motion=20Studio?=
 <163354043+AEmotionStudio@users.noreply.github.com>
Date: Tue, 24 Mar 2026 16:23:57 -0700
Subject: [PATCH] fix: Adjust shader canvas drawing order to render on top of
 the node's title gradient.

---
 package.json               | 2 +-
 pyproject.toml             | 2 +-
 web/shader_renderer.js     | 6 ++++--
 web/src/shader_renderer.ts | 4 +++-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 36247e9..6ec9cbe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "comfyui-shadernoiseksampler-web",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "type": "module",
     "description": "TypeScript frontend for ComfyUI ShaderNoiseKSampler custom nodes",
     "scripts": {
diff --git a/pyproject.toml b/pyproject.toml
index 8a336ad..12aee5c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-shadernoiseksampler"
 description = "Transform AI image generation from random exploration into deliberate artistic navigation. This advanced KSampler replacement blends traditional noise with shader noise. Navigate latent space with intention using adjustable noise parameters, shape masks, and colors transformations."
-version = "1.3.2"
+version = "1.3.3"
 license = {file = "LICENSE"}
 
 [project.urls]
diff --git a/web/shader_renderer.js b/web/shader_renderer.js
index d60886f..31669d4 100644
--- a/web/shader_renderer.js
+++ b/web/shader_renderer.js
@@ -1465,6 +1465,9 @@ app.registerExtension({
         nodeType.prototype.onDrawForeground = function (ctx) {
             if (this.properties?.shaderVisible && this.shaderCanvas && !this.flags?.collapsed) {
                 this.isShaderActive = true;
+                // Call origOnDrawForeground FIRST so gradient title acts as background
+                if (origOnDrawForeground)
+                    origOnDrawForeground.call(this, ctx);
                 // Render shader synchronously before drawing to ensure fresh content
                 this.renderShader();
                 if (!this.animationFrameId) {
@@ -1481,12 +1484,11 @@ app.registerExtension({
                 const baseSize = origComputeSize ? origComputeSize.call(this, [this.size[0], 0]) : [this.size[0], 0];
                 const shaderY = baseSize[1];
                 const shaderHeight = Math.max(50, this.size[1] - shaderY);
+                // Draw shader canvas AFTER origOnDrawForeground so it renders on top of the gradient
                 try {
                     ctx.drawImage(this.shaderCanvas, 0, shaderY, this.size[0], shaderHeight);
                 }
                 catch (e) { /* ignore */ }
-                if (origOnDrawForeground)
-                    origOnDrawForeground.call(this, ctx);
             }
             else {
                 if (origOnDrawForeground)
diff --git a/web/src/shader_renderer.ts b/web/src/shader_renderer.ts
index ebce6e2..eed8a52 100644
--- a/web/src/shader_renderer.ts
+++ b/web/src/shader_renderer.ts
@@ -1523,6 +1523,8 @@ const FRAGMENT_SHADER_FOOTER = `
         nodeType.prototype.onDrawForeground = function (this: ShaderRendererNode, ctx: CanvasRenderingContext2D) {
             if (this.properties?.shaderVisible && this.shaderCanvas && !this.flags?.collapsed) {
                 this.isShaderActive = true;
+                // Call origOnDrawForeground FIRST so gradient title acts as background
+                if (origOnDrawForeground) origOnDrawForeground.call(this, ctx);
                 // Render shader synchronously before drawing to ensure fresh content
                 this.renderShader();
                 if (!this.animationFrameId) {
@@ -1536,8 +1538,8 @@ const FRAGMENT_SHADER_FOOTER = `
                 const baseSize = origComputeSize ? origComputeSize.call(this, [this.size[0], 0]) : [this.size[0], 0];
                 const shaderY = baseSize[1];
                 const shaderHeight = Math.max(50, this.size[1] - shaderY);
+                // Draw shader canvas AFTER origOnDrawForeground so it renders on top of the gradient
                 try { ctx.drawImage(this.shaderCanvas, 0, shaderY, this.size[0], shaderHeight); } catch (e) { /* ignore */ }
-                if (origOnDrawForeground) origOnDrawForeground.call(this, ctx);
             } else {
                 if (origOnDrawForeground) origOnDrawForeground.call(this, ctx);
                 this.isShaderActive = false;