@363045841yyt/klinechart-core 0.9.0-alpha.0 → 0.9.0-alpha.2

package/src/engine/renderers/Indicator/cci.ts

@@ -15,6 +15,7 @@ import { createCCIVisibleStateComposer } from '../../indicators/visibleStateComp
 
 import { createCciScaleRendererPlugin } from './scale/cci_scale'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 type LinePoint = { x: number; y: number }
 
@@ -100,7 +101,7 @@ function createCCIRendererPlugin(options: CCIRendererOptions = {}): RendererPlug
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, dpr, kLineCenters } = context
       const colors = resolveThemeColors(
         context.theme,
         context.isAsiaMarket,
@@ -185,22 +186,11 @@ function createCCIRendererPlugin(options: CCIRendererOptions = {}): RendererPlug
       }
 
       // 绘制 CCI 线（WebGL 优先，Canvas2D 回退）
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        if (params.showCCI && cachedCCIPoints.length >= 2) {
-          const ok = lineWebGLSurface.drawLineStrips(
-            [{ points: cachedCCIPoints, width: 1, color: colors.cci.cci }],
-            scrollLeft,
-          )
-          if (ok) {
-            usedWebGL = true
-            lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-          }
-        }
-      }
-
-      if (!usedWebGL) {
+      const cciLines =
+        params.showCCI && cachedCCIPoints.length >= 2
+          ? [{ points: cachedCCIPoints, width: 1, color: colors.cci.cci }]
+          : []
+      if (!tryDrawLinesGpu(context, cciLines, scrollLeft)) {
         drawCCILineWithCanvas2D(ctx, scrollLeft, cachedCCIPoints, params, colors)
       }
     },

package/src/engine/renderers/Indicator/chaikinVol.ts

@@ -14,6 +14,7 @@ import {
   EMPTY_CHAIKIN_VOL_STATE,
 } from '../../indicators/state/chaikinVolState'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 
@@ -60,7 +61,7 @@ function createChaikinVolRendererPlugin(options: { paneId?: string } = {}): Rend
       return key ? [key] : []
     },
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
       const stateKey = resolveKey()
       if (!stateKey) return
       const state = pluginHost?.getSharedState<ChaikinVolRenderState>(stateKey)
@@ -101,20 +102,7 @@ function createChaikinVolRendererPlugin(options: { paneId?: string } = {}): Rend
 
       if (points.length < 2) return
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lineWebGLSurface.drawLineStrips(
-          [{ points, width: 1, color: CHAIKIN_VOL_COLOR }],
-          scrollLeft,
-        )
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, [{ points, width: 1, color: CHAIKIN_VOL_COLOR }], scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/cmf.ts

@@ -11,6 +11,7 @@ import type { IndicatorScheduler, CMFSchedulerConfig } from '../../indicators/sc
 import type { CMFRenderState } from '../../indicators/state/cmfState'
 import { createCMFStateKey, EMPTY_CMF_STATE } from '../../indicators/state/cmfState'
 import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 
@@ -54,7 +55,7 @@ function createCMFRendererPlugin(options: { paneId?: string } = {}): RendererPlu
       return key ? [key] : []
     },
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
       const stateKey = resolveKey()
       if (!stateKey) return
       const state = pluginHost?.getSharedState<CMFRenderState>(stateKey)
@@ -95,20 +96,7 @@ function createCMFRendererPlugin(options: { paneId?: string } = {}): RendererPlu
 
       if (points.length < 2) return
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lineWebGLSurface.drawLineStrips(
-          [{ points, width: 1, color: CMF_COLOR }],
-          scrollLeft,
-        )
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, [{ points, width: 1, color: CMF_COLOR }], scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/dema.ts

@@ -11,6 +11,7 @@ import type { IndicatorScheduler, DEMASchedulerConfig } from '../../indicators/s
 import type { DEMARenderState } from '../../indicators/state/demaState'
 import { createDEMAStateKey, EMPTY_DEMA_STATE } from '../../indicators/state/demaState'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 
@@ -62,7 +63,7 @@ function createDEMARendererPlugin(options: DEMARendererOptions = {}): RendererPl
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
 
       const stateKey = resolveKey()
       if (!stateKey) return
@@ -84,20 +85,7 @@ function createDEMARendererPlugin(options: DEMARendererOptions = {}): RendererPl
 
       if (points.length < 2) return
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lineWebGLSurface.drawLineStrips(
-          [{ points, width: 1, color: DEMA_COLOR }],
-          scrollLeft,
-        )
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, [{ points, width: 1, color: DEMA_COLOR }], scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/donchian.ts

@@ -16,6 +16,7 @@ import type { IndicatorScheduler, DonchianSchedulerConfig } from '../../indicato
 import type { DonchianRenderState } from '../../indicators/state/donchianState'
 import { createDonchianStateKey, EMPTY_DONCHIAN_STATE } from '../../indicators/state/donchianState'
 import { createBandVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 const DONCHIAN_UPPER_COLOR = '#0891b2'
 const DONCHIAN_MIDDLE_COLOR = '#94a3b8'
@@ -68,7 +69,7 @@ function createDonchianRendererPlugin(
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
       const stateKey = resolveKey()
       if (!stateKey) return
       const state = pluginHost?.getSharedState<DonchianRenderState>(stateKey)
@@ -102,17 +103,7 @@ function createDonchianRendererPlugin(
       if (lowerPts.length >= 2)
         lines.push({ points: lowerPts, width: 1, color: DONCHIAN_LOWER_COLOR })
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, lines, scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/ene.ts

@@ -20,10 +20,14 @@ import type {
 import type { ENESchedulerConfig, IndicatorScheduler } from '../../indicators/scheduler'
 import { ENE_STATE_KEY, type ENERenderState } from '../../indicators/state/eneState'
 
-import { getRgbaAlpha, toOpaqueRgba, compositeLineSurface } from './shared/webglBand'
+import { getRgbaAlpha, toOpaqueRgba } from './shared/webglBand'
+import { tryDrawFilledBandGpu, tryDrawLinesGpu } from '../linesViaRenderer'
 
 type LinePoint = { x: number; y: number }
 
+/**
+ * ENE GPU：先 band fill 再上/中/下轨。仅 sceneRenderer；失败返回 false 走 2D。
+ */
 function drawENEWithWebGL(
   context: RenderContext,
   data: {
@@ -37,25 +41,18 @@ function drawENEWithWebGL(
     context.isAsiaMarket,
     context.colorPresetSettings,
   )
-  if (context.settings?.enableWebGLRendering === false) return false
-  const surface = context.lineWebGLSurface
-  if (!surface || !surface.isAvailable()) return false
-
-  surface.clear()
-
-  let allOk = true
+  // band 默认 false：无 surface 时不得假成功跳过 2D
+  let bandOk = false
   if (data.upperPoints.length >= 2 && data.lowerPoints.length >= 2) {
-    surface.clear()
-    allOk = surface.drawFilledBand(
-      { upperPoints: data.upperPoints, lowerPoints: data.lowerPoints },
+    bandOk = tryDrawFilledBandGpu(
+      context,
+      data.upperPoints,
+      data.lowerPoints,
       toOpaqueRgba(colors.ene.bandFill),
       context.scrollLeft,
+      getRgbaAlpha(colors.ene.bandFill),
     )
-    if (allOk) {
-      compositeLineSurface(context, surface, getRgbaAlpha(colors.ene.bandFill))
-    }
   }
-  surface.clear()
 
   const lineStrips: Array<{ points: LinePoint[]; width: number; color: string }> = []
   if (data.upperPoints.length >= 2) {
@@ -67,17 +64,10 @@ function drawENEWithWebGL(
   if (data.lowerPoints.length >= 2) {
     lineStrips.push({ points: data.lowerPoints, width: 1, color: colors.ene.lower })
   }
-  if (lineStrips.length > 0) {
-    allOk = surface.drawLineStrips(lineStrips, context.scrollLeft)
-  }
-  if (!allOk) {
-    surface.clear()
-    return false
-  }
 
-  compositeLineSurface(context, surface)
-  surface.clear()
-  return true
+  if (lineStrips.length === 0) return bandOk
+  // 线失败 → false，整图 2D 重画（含 band）
+  return tryDrawLinesGpu(context, lineStrips, context.scrollLeft)
 }
 
 /** 创建 ENE（轨道线）渲染器插件（无状态版本）

package/src/engine/renderers/Indicator/expma.ts

@@ -19,6 +19,7 @@ import type {
 } from '../../indicators/indicatorMetadata'
 import type { EXPMASchedulerConfig, IndicatorScheduler } from '../../indicators/scheduler'
 import { EXPMA_STATE_KEY, type EXPMARenderState } from '../../indicators/state/expmaState'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 type LinePoint = { x: number; y: number }
 
@@ -127,7 +128,7 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, data, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, data, range, scrollLeft, dpr, kLineCenters } = context
       const klineData = data as KLineData[]
       const colors = resolveThemeColors(
         context.theme,
@@ -169,9 +170,7 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
         }
       }
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
+      {
         const lines: Array<{ points: LinePoint[]; width: number; color: string }> = []
         if (cachedFastPoints.length >= 2) {
           lines.push({ points: cachedFastPoints, width: 1, color: colors.expma.fast })
@@ -179,17 +178,9 @@ export function createEXPMARendererPlugin(): RendererPluginWithHost {
         if (cachedSlowPoints.length >= 2) {
           lines.push({ points: cachedSlowPoints, width: 1, color: colors.expma.slow })
         }
-
-        const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
-
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
+        if (tryDrawLinesGpu(context, lines, scrollLeft)) return
       }
 
-      if (usedWebGL) return
-
       ctx.save()
       ctx.translate(-scrollLeft, 0)
       ctx.lineWidth = 1

package/src/engine/renderers/Indicator/fastk.ts

@@ -16,6 +16,7 @@ import { createFixedRangeSparseVisibleStateComposer } from '../../indicators/vis
 import { createFastkScaleRendererPlugin } from './scale/fastk_scale'
 import { createDashedLineRenderer } from './shared/dashedLines'
 import { createSingleLineTitleInfo } from './shared/titleInfo'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 type LinePoint = { x: number; y: number }
 
@@ -104,7 +105,7 @@ function createFASTKRendererPlugin(options: FASTKRendererOptions = {}): Renderer
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, dpr, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, dpr, kLineCenters } = context
       const colors = resolveThemeColors(
         context.theme,
         context.isAsiaMarket,
@@ -161,22 +162,11 @@ function createFASTKRendererPlugin(options: FASTKRendererOptions = {}): Renderer
       }
 
       // 绘制 FASTK 线（WebGL 优先，Canvas2D 回退）
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        if (params.showFASTK && cachedFASTKPoints.length >= 2) {
-          const ok = lineWebGLSurface.drawLineStrips(
-            [{ points: cachedFASTKPoints, width: 1, color: colors.kdj.k }],
-            scrollLeft,
-          )
-          if (ok) {
-            usedWebGL = true
-            lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-          }
-        }
-      }
-
-      if (!usedWebGL) {
+      const fastkLines =
+        params.showFASTK && cachedFASTKPoints.length >= 2
+          ? [{ points: cachedFASTKPoints, width: 1, color: colors.kdj.k }]
+          : []
+      if (!tryDrawLinesGpu(context, fastkLines, scrollLeft)) {
         drawFASTKLineWithCanvas2D(ctx, scrollLeft, cachedFASTKPoints, params, colors)
       }
     },

package/src/engine/renderers/Indicator/fib.ts

@@ -16,6 +16,7 @@ import type { IndicatorScheduler, FibSchedulerConfig } from '../../indicators/sc
 import type { FibRenderState } from '../../indicators/state/fibState'
 import { createFibStateKey, EMPTY_FIB_STATE } from '../../indicators/state/fibState'
 import { createExactRangePointVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 const FIB_COLORS = {
   high: '#94a3b8',
@@ -66,7 +67,7 @@ function createFibRendererPlugin(options: { paneId?: string } = {}): RendererPlu
       return key ? [key] : []
     },
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
       const stateKey = resolveKey()
       if (!stateKey) return
       const state = pluginHost?.getSharedState<FibRenderState>(stateKey)
@@ -107,17 +108,7 @@ function createFibRendererPlugin(options: { paneId?: string } = {}): RendererPlu
         }
       }
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, lines, scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/hma.ts

@@ -11,6 +11,7 @@ import type { IndicatorScheduler, HMASchedulerConfig } from '../../indicators/sc
 import type { HMARenderState } from '../../indicators/state/hmaState'
 import { createHMAStateKey, EMPTY_HMA_STATE } from '../../indicators/state/hmaState'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 
@@ -62,7 +63,7 @@ function createHMARendererPlugin(options: HMARendererOptions = {}): RendererPlug
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
 
       const stateKey = resolveKey()
       if (!stateKey) return
@@ -84,20 +85,7 @@ function createHMARendererPlugin(options: HMARendererOptions = {}): RendererPlug
 
       if (points.length < 2) return
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lineWebGLSurface.drawLineStrips(
-          [{ points, width: 1, color: HMA_COLOR }],
-          scrollLeft,
-        )
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, [{ points, width: 1, color: HMA_COLOR }], scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/hv.ts

@@ -13,6 +13,7 @@ import type { HVRenderState } from '../../indicators/state/hvState'
 import { createHVStateKey } from '../../indicators/state/hvState'
 import { EMPTY_HV_STATE } from '../../indicators/state/hvState'
 import { createNonNegativeSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 
@@ -57,7 +58,7 @@ function createHVRendererPlugin(options: { paneId?: string } = {}): RendererPlug
       return key ? [key] : []
     },
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
       const stateKey = resolveKey()
       if (!stateKey) return
       const state = pluginHost?.getSharedState<HVRenderState>(stateKey)
@@ -84,20 +85,7 @@ function createHVRendererPlugin(options: { paneId?: string } = {}): RendererPlug
 
       if (points.length < 2) return
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lineWebGLSurface.drawLineStrips(
-          [{ points, width: 1, color: HV_COLOR }],
-          scrollLeft,
-        )
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, [{ points, width: 1, color: HV_COLOR }], scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/ichimoku.ts

@@ -19,6 +19,7 @@ import type { IchimokuRenderState } from '../../indicators/state/ichimokuState'
 import { createIchimokuStateKey, EMPTY_ICHIMOKU_STATE } from '../../indicators/state/ichimokuState'
 import { createIchimokuVisibleStateComposer } from '../../indicators/visibleStateComposers'
 import { getPhysicalKLineConfig } from '../../utils/klineConfig'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 const TENKAN_COLOR = '#dc2626'
 const KIJUN_COLOR = '#2563eb'
@@ -99,16 +100,14 @@ function renderCloudFill(
 }
 
 function renderIchimokuLines(
-  ctx: CanvasRenderingContext2D,
-  lineWebGLSurface: RenderContext['lineWebGLSurface'],
-  scrollLeft: number,
-  enableWebGL: boolean,
+  context: RenderContext,
   tenkanPts: Point[],
   kijunPts: Point[],
   spanAPts: Point[],
   spanBPts: Point[],
   chikouPts: Point[],
 ): void {
+  const { ctx, scrollLeft } = context
   const lines: Array<{ points: Point[]; width: number; color: string }> = []
   if (tenkanPts.length >= 2) lines.push({ points: tenkanPts, width: 1, color: TENKAN_COLOR })
   if (kijunPts.length >= 2) lines.push({ points: kijunPts, width: 1, color: KIJUN_COLOR })
@@ -116,13 +115,7 @@ function renderIchimokuLines(
   if (spanBPts.length >= 2) lines.push({ points: spanBPts, width: 1, color: SPAN_B_COLOR })
   if (chikouPts.length >= 2) lines.push({ points: chikouPts, width: 1, color: CHIKOU_COLOR })
 
-  if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-    const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
-    if (allOk) {
-      lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-      return
-    }
-  }
+  if (tryDrawLinesGpu(context, lines, scrollLeft)) return
 
   ctx.save()
   ctx.translate(-scrollLeft, 0)
@@ -182,7 +175,7 @@ function createIchimokuRendererPlugin(
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
       const colors = resolveThemeColors(
         context.theme,
         context.isAsiaMarket,
@@ -200,10 +193,7 @@ function createIchimokuRendererPlugin(
         renderCloudFill(ctx, points.cloudSegs, colors, scrollLeft)
       }
       renderIchimokuLines(
-        ctx,
-        lineWebGLSurface,
-        scrollLeft,
-        context.settings?.enableWebGLRendering !== false,
+        context,
         points.tenkanPts,
         points.kijunPts,
         points.spanAPts,
@@ -238,20 +228,27 @@ function fillCloud(
   bearColor: string,
   alpha = 0.15,
 ): void {
+  if (segs.length < 2) return
   ctx.save()
   ctx.globalAlpha = alpha
-  for (let i = 0; i < segs.length - 1; i++) {
-    const a = segs[i]!
-    const b = segs[i + 1]!
-    ctx.fillStyle = a.bull ? bullColor : bearColor
+
+  let start = 0
+  const lastSeg = segs.length - 1
+  while (start < lastSeg) {
+    const isBull = segs[start]!.bull
+    ctx.fillStyle = isBull ? bullColor : bearColor
+    let end = start
+    while (end < lastSeg && segs[end]!.bull === isBull) end++
+    end--
     ctx.beginPath()
-    ctx.moveTo(a.x, a.ya)
-    ctx.lineTo(b.x, b.ya)
-    ctx.lineTo(b.x, b.yb)
-    ctx.lineTo(a.x, a.yb)
+    ctx.moveTo(segs[start]!.x, segs[start]!.ya)
+    for (let k = start + 1; k <= end + 1; k++) ctx.lineTo(segs[k]!.x, segs[k]!.ya)
+    for (let k = end; k >= start; k--) ctx.lineTo(segs[k]!.x, segs[k]!.yb)
     ctx.closePath()
     ctx.fill()
+    start = end + 1
   }
+
   ctx.restore()
 }
 

package/src/engine/renderers/Indicator/kama.ts

@@ -11,6 +11,7 @@ import type { IndicatorScheduler, KAMASchedulerConfig } from '../../indicators/s
 import type { KAMARenderState } from '../../indicators/state/kamaState'
 import { createKAMAStateKey, EMPTY_KAMA_STATE } from '../../indicators/state/kamaState'
 import { createSparseVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 import { createSingleLineTitleInfo } from './shared/titleInfo'
 
@@ -62,7 +63,7 @@ function createKAMARendererPlugin(options: KAMARendererOptions = {}): RendererPl
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
 
       const stateKey = resolveKey()
       if (!stateKey) return
@@ -84,20 +85,7 @@ function createKAMARendererPlugin(options: KAMARendererOptions = {}): RendererPl
 
       if (points.length < 2) return
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lineWebGLSurface.drawLineStrips(
-          [{ points, width: 1, color: KAMA_COLOR }],
-          scrollLeft,
-        )
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, [{ points, width: 1, color: KAMA_COLOR }], scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)

package/src/engine/renderers/Indicator/keltner.ts

@@ -16,6 +16,7 @@ import type { IndicatorScheduler, KeltnerSchedulerConfig } from '../../indicator
 import type { KeltnerRenderState } from '../../indicators/state/keltnerState'
 import { createKeltnerStateKey, EMPTY_KELTNER_STATE } from '../../indicators/state/keltnerState'
 import { createBandVisibleStateComposer } from '../../indicators/visibleStateComposers'
+import { tryDrawLinesGpu } from '../linesViaRenderer'
 
 const KELTNER_UPPER_COLOR = '#7c3aed'
 const KELTNER_MIDDLE_COLOR = '#f59e0b'
@@ -66,7 +67,7 @@ function createKeltnerRendererPlugin(options: KeltnerRendererOptions = {}): Rend
     },
 
     draw(context: RenderContext) {
-      const { ctx, pane, range, scrollLeft, kLineCenters, lineWebGLSurface } = context
+      const { ctx, pane, range, scrollLeft, kLineCenters } = context
       const stateKey = resolveKey()
       if (!stateKey) return
       const state = pluginHost?.getSharedState<KeltnerRenderState>(stateKey)
@@ -100,17 +101,7 @@ function createKeltnerRendererPlugin(options: KeltnerRendererOptions = {}): Rend
       if (lowerPts.length >= 2)
         lines.push({ points: lowerPts, width: 1, color: KELTNER_LOWER_COLOR })
 
-      const enableWebGL = context.settings?.enableWebGLRendering !== false
-      let usedWebGL = false
-      if (enableWebGL && lineWebGLSurface?.isAvailable()) {
-        const allOk = lines.length > 0 && lineWebGLSurface.drawLineStrips(lines, scrollLeft)
-        if (allOk) {
-          usedWebGL = true
-          lineWebGLSurface.compositeTo(ctx, { imageSmoothingEnabled: false })
-        }
-      }
-
-      if (usedWebGL) return
+      if (tryDrawLinesGpu(context, lines, scrollLeft)) return
 
       ctx.save()
       ctx.translate(-scrollLeft, 0)