pixel-data-js 0.24.0 → 0.25.2

package/src/Paint/PaintBuffer.ts

@@ -0,0 +1,269 @@
+import type { Color32, PaintAlphaMask, PaintBinaryMask, Rect } from '../_types'
+import { forEachLinePoint } from '../Algorithm/forEachLinePoint'
+import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+import { macro_halfAndFloor } from '../Internal/helpers'
+import type { PixelTile } from '../PixelTile/PixelTile'
+import type { PixelTilePool } from '../PixelTile/PixelTilePool'
+import { trimRectBounds } from '../Rect/trimRectBounds'
+
+export class PaintBuffer {
+  readonly lookup: (PixelTile | undefined)[]
+  private readonly scratchBounds: Rect = { x: 0, y: 0, w: 0, h: 0 }
+
+  constructor(
+    readonly config: PixelEngineConfig,
+    readonly tilePool: PixelTilePool,
+  ) {
+    this.lookup = []
+  }
+
+  private eachTileInBounds(
+    bounds: Rect,
+    callback: (tile: PixelTile, bX: number, bY: number, bW: number, bH: number) => void,
+  ): void {
+    const { tileShift, targetColumns, targetRows, tileSize } = this.config
+
+    const x1 = Math.max(0, bounds.x >> tileShift)
+    const y1 = Math.max(0, bounds.y >> tileShift)
+    const x2 = Math.min(targetColumns - 1, (bounds.x + bounds.w - 1) >> tileShift)
+    const y2 = Math.min(targetRows - 1, (bounds.y + bounds.h - 1) >> tileShift)
+
+    if (x1 > x2 || y1 > y2) return
+
+    const lookup = this.lookup
+    const tilePool = this.tilePool
+
+    for (let ty = y1; ty <= y2; ty++) {
+      const rowOffset = ty * targetColumns
+      const tileTop = ty << tileShift
+
+      for (let tx = x1; tx <= x2; tx++) {
+        const id = rowOffset + tx
+        const tile = lookup[id] ?? (lookup[id] = tilePool.getTile(id, tx, ty))
+        const tileLeft = tx << tileShift
+
+        const startX = bounds.x > tileLeft ? bounds.x : tileLeft
+        const startY = bounds.y > tileTop ? bounds.y : tileTop
+
+        const maskEndX = bounds.x + bounds.w
+        const tileEndX = tileLeft + tileSize
+        const endX = maskEndX < tileEndX ? maskEndX : tileEndX
+
+        const maskEndY = bounds.y + bounds.h
+        const tileEndY = tileTop + tileSize
+        const endY = maskEndY < tileEndY ? maskEndY : tileEndY
+
+        callback(tile, startX, startY, endX - startX, endY - startY)
+      }
+    }
+  }
+
+  writePaintAlphaMaskStroke(
+    color: Color32,
+    brush: PaintAlphaMask,
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+  ): boolean {
+    const cA = color >>> 24
+    if (cA === 0) return false
+
+    const { tileShift, tileMask, target } = this.config
+    const { w: bW, h: bH, data: bD, centerOffsetX, centerOffsetY } = brush
+    const cRGB = color & 0x00ffffff
+    const scratch = this.scratchBounds
+
+    let changed = false
+
+    forEachLinePoint(x0, y0, x1, y1, (px, py) => {
+
+      const topLeftX = Math.floor(px + centerOffsetX)
+      const topLeftY = Math.floor(py + centerOffsetY)
+      trimRectBounds(
+        topLeftX,
+        topLeftY,
+        bW,
+        bH,
+        target.width,
+        target.height,
+        scratch,
+      )
+
+      if (scratch.w <= 0 || scratch.h <= 0) return
+
+      this.eachTileInBounds(scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const d32 = tile.data32
+        let tileChanged = false
+
+        for (let i = 0; i < bH_t; i++) {
+          const canvasY = bY + i
+          const bOff = (canvasY - topLeftY) * bW
+          const tOff = (canvasY & tileMask) << tileShift
+          const dS = tOff + (bX & tileMask)
+
+          for (let j = 0; j < bW_t; j++) {
+            const canvasX = bX + j
+            const brushA = bD[bOff + (canvasX - topLeftX)]
+            if (brushA === 0) continue
+
+            const t = cA * brushA + 128
+            const blendedA = (t + (t >> 8)) >> 8
+
+            const idx = dS + j
+            const cur = d32[idx]
+            if (brushA > (cur >>> 24)) {
+              const next = (cRGB | (blendedA << 24)) >>> 0
+              if (cur !== next) {
+                d32[idx] = next as Color32
+                tileChanged = true
+              }
+            }
+          }
+        }
+        if (tileChanged) changed = true
+      })
+    })
+    return changed
+  }
+
+  writePaintBinaryMaskStroke(
+    color: Color32,
+    brush: PaintBinaryMask,
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+  ): boolean {
+    const alphaIsZero = (color >>> 24) === 0
+    if (alphaIsZero) return false
+
+    const { tileShift, tileMask, target } = this.config
+    const { w: bW, h: bH, data: bD, centerOffsetX, centerOffsetY } = brush
+    const scratch = this.scratchBounds
+    let changed = false
+
+    forEachLinePoint(x0, y0, x1, y1, (px, py) => {
+      const topLeftX = Math.floor(px + centerOffsetX)
+      const topLeftY = Math.floor(py + centerOffsetY)
+
+      trimRectBounds(
+        topLeftX,
+        topLeftY,
+        bW,
+        bH,
+        target.width,
+        target.height,
+        scratch,
+      )
+
+      if (scratch.w <= 0 || scratch.h <= 0) return
+
+      this.eachTileInBounds(scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const d32 = tile.data32
+        let tileChanged = false
+
+        for (let i = 0; i < bH_t; i++) {
+          const canvasY = bY + i
+          const bOff = (canvasY - topLeftY) * bW
+          const tOff = (canvasY & tileMask) << tileShift
+          const dS = tOff + (bX & tileMask)
+
+          for (let j = 0; j < bW_t; j++) {
+            const canvasX = bX + j
+            if (bD[bOff + (canvasX - topLeftX)]) {
+              const idx = dS + j
+              if (d32[idx] !== color) {
+                d32[idx] = color
+                tileChanged = true
+              }
+            }
+          }
+        }
+        if (tileChanged) changed = true
+      })
+    })
+
+    return changed
+  }
+
+  writeRectStroke(
+    color: Color32,
+    brushWidth: number,
+    brushHeight: number,
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+  ): boolean {
+    const alphaIsZero = (color >>> 24) === 0
+    if (alphaIsZero) return false
+
+    const config = this.config
+    const tileShift = config.tileShift
+    const tileMask = config.tileMask
+    const target = config.target
+    const scratch = this.scratchBounds
+
+    const centerOffsetX = macro_halfAndFloor(brushWidth - 1)
+    const centerOffsetY = macro_halfAndFloor(brushHeight - 1)
+
+    let changed = false
+
+    forEachLinePoint(
+      x0,
+      y0,
+      x1,
+      y1,
+      (px, py) => {
+        const topLeftX = Math.floor(px + centerOffsetX)
+        const topLeftY = Math.floor(py + centerOffsetY)
+
+        trimRectBounds(
+          topLeftX,
+          topLeftY,
+          brushWidth,
+          brushHeight,
+          target.width,
+          target.height,
+          scratch,
+        )
+
+        if (scratch.w <= 0 || scratch.h <= 0) return
+
+        this.eachTileInBounds(
+          scratch,
+          (tile, bX, bY, bW_t, bH_t) => {
+            const d32 = tile.data32
+            let tileChanged = false
+
+            for (let i = 0; i < bH_t; i++) {
+              const canvasY = bY + i
+              const tOff = (canvasY & tileMask) << tileShift
+              const dS = tOff + (bX & tileMask)
+
+              for (let j = 0; j < bW_t; j++) {
+                const idx = dS + j
+
+                if (d32[idx] !== color) {
+                  d32[idx] = color
+                  tileChanged = true
+                }
+              }
+            }
+
+            if (tileChanged) {
+              changed = true
+            }
+          },
+        )
+      },
+    )
+
+    return changed
+  }
+
+  clear(): void {
+    this.tilePool.releaseTiles(this.lookup)
+  }
+}

package/src/{PixelTile/PaintBufferRenderer.ts → Paint/PaintBufferCanvasRenderer.ts}

@@ -1,14 +1,13 @@
 import { CANVAS_CTX_FAILED } from '../Canvas/_constants'
 import type { PaintBuffer } from './PaintBuffer'
 
-export type PaintBufferRenderer = ReturnType<typeof makePaintBufferRenderer>
+export type PaintBufferCanvasRenderer = ReturnType<typeof makePaintBufferCanvasRenderer>
 
 /**
  *
- * @param paintBuffer
  * @param offscreenCanvasClass - @internal
  */
-export function makePaintBufferRenderer(
+export function makePaintBufferCanvasRenderer(
   paintBuffer: PaintBuffer,
   offscreenCanvasClass = OffscreenCanvas,
 ) {
@@ -22,8 +21,14 @@ export function makePaintBufferRenderer(
   ctx.imageSmoothingEnabled = false
 
   return function drawPaintBuffer(
-    target: CanvasRenderingContext2D,
+    targetCtx: CanvasRenderingContext2D,
+    alpha = 255,
+    compOperation: GlobalCompositeOperation = 'source-over',
   ): void {
+
+    targetCtx.globalAlpha = alpha / 255
+    targetCtx.globalCompositeOperation = compOperation
+
     for (let i = 0; i < lookup.length; i++) {
       const tile = lookup[i]
 
@@ -33,8 +38,11 @@ export function makePaintBufferRenderer(
 
         ctx.putImageData(tile.imageData, 0, 0)
 
-        target.drawImage(canvas, dx, dy)
+        targetCtx.drawImage(canvas, dx, dy)
       }
     }
+
+    targetCtx.globalAlpha = 1
+    targetCtx.globalCompositeOperation = 'source-over'
   }
 }

package/src/Paint/makeCirclePaintAlphaMask.ts

@@ -0,0 +1,41 @@
+import { MaskType, type PaintAlphaMask } from '../_types'
+
+export function makeCirclePaintAlphaMask(size: number, fallOff: (d: number) => number = (d) => d): PaintAlphaMask {
+  const area = size * size
+  const data = new Uint8Array(area)
+  const radius = size / 2
+  const invR = 1 / radius
+
+  const centerOffset = -Math.ceil(radius - 0.5)
+
+  for (let y = 0; y < size; y++) {
+    const rowOffset = y * size
+    const dy = y - radius + 0.5
+    const dy2 = dy * dy
+
+    for (let x = 0; x < size; x++) {
+      const dx = x - radius + 0.5
+      const distSqr = dx * dx + dy2
+
+      if (distSqr <= (radius * radius)) {
+        const dist = Math.sqrt(distSqr) * invR
+
+        // Pass 1.0 at center, 0.0 at edge
+        const strength = fallOff(1 - dist)
+        if (strength > 0) {
+          const intensity = (strength * 255) | 0
+          data[rowOffset + x] = Math.max(0, Math.min(255, intensity))
+        }
+      }
+    }
+  }
+
+  return {
+    type: MaskType.ALPHA,
+    data,
+    w: size,
+    h: size,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset
+  }
+}

package/src/{Mask/CircleBinaryMask.ts → Paint/makeCirclePaintBinaryMask.ts}

@@ -1,11 +1,11 @@
-import { type CircleBinaryMask, MaskType } from '../_types'
+import { MaskType, type PaintBinaryMask } from '../_types'
 
-export function makeCircleBinaryMask(size: number): CircleBinaryMask {
+export function makeCirclePaintBinaryMask(size: number): PaintBinaryMask {
   const area = size * size
   const data = new Uint8Array(area)
   const radius = size / 2
 
-  const minOffset = -Math.ceil(radius - 0.5)
+  const centerOffset = -Math.ceil(radius - 0.5)
 
   for (let y = 0; y < size; y++) {
     for (let x = 0; x < size; x++) {
@@ -23,8 +23,7 @@ export function makeCircleBinaryMask(size: number): CircleBinaryMask {
     data,
     w: size,
     h: size,
-    radius,
-    size,
-    minOffset,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset,
   }
 }

package/src/Paint/makePaintMask.ts

@@ -0,0 +1,28 @@
+import { type AlphaMask, type BinaryMask, MaskType, type PaintAlphaMask, type PaintBinaryMask } from '../_types'
+import { macro_halfAndFloor } from '../Internal/helpers'
+
+export function makePaintBinaryMask(
+  mask: BinaryMask,
+): PaintBinaryMask {
+  return {
+    type: MaskType.BINARY,
+    data: mask.data,
+    w: mask.w,
+    h: mask.h,
+    centerOffsetX: -macro_halfAndFloor(mask.w),
+    centerOffsetY: -macro_halfAndFloor(mask.h),
+  }
+}
+
+export function makePaintAlphaMask(
+  mask: AlphaMask,
+): PaintAlphaMask {
+  return {
+    type: MaskType.ALPHA,
+    data: mask.data,
+    w: mask.w,
+    h: mask.h,
+    centerOffsetX: -macro_halfAndFloor(mask.w),
+    centerOffsetY: -macro_halfAndFloor(mask.h),
+  }
+}

package/src/Paint/makeRectFalloffPaintAlphaMask.ts

@@ -0,0 +1,47 @@
+import { MaskType, type PaintAlphaMask } from '../_types'
+import { macro_halfAndFloor } from '../Internal/helpers'
+
+export function makeRectFalloffPaintAlphaMask(
+  width: number,
+  height: number,
+  fallOff: (d: number) => number = (d) => d,
+): PaintAlphaMask {
+  const fPx = Math.floor(width / 2)
+  const fPy = Math.floor(height / 2)
+
+  const invHalfW = 2 / width
+  const invHalfH = 2 / height
+
+  const offX = (width % 2 === 0) ? 0.5 : 0
+  const offY = (height % 2 === 0) ? 0.5 : 0
+
+  const area = width * height
+  const data = new Uint8Array(area)
+
+  for (let y = 0; y < height; y++) {
+    const dy = Math.abs((y - fPy) + offY) * invHalfH
+    const rowOffset = y * width
+
+    for (let x = 0; x < width; x++) {
+      const dx = Math.abs((x - fPx) + offX) * invHalfW
+
+      // Chebyshev distance (square/rect shape)
+      const dist = dx > dy ? dx : dy
+      // Pass 1.0 at center, 0.0 at edge
+      const strength = fallOff(1 - dist)
+      if (strength > 0) {
+        const intensity = (strength * 255) | 0
+        data[rowOffset + x] = Math.max(0, Math.min(255, intensity))
+      }
+    }
+  }
+
+  return {
+    type: MaskType.ALPHA,
+    data: data,
+    w: width,
+    h: height,
+    centerOffsetX: -macro_halfAndFloor(width),
+    centerOffsetY: -macro_halfAndFloor(height),
+  }
+}

package/src/PixelData/PixelBuffer32.ts

@@ -1,6 +1,6 @@
-import type { IPixelData } from '../_types'
+import type { IPixelData32 } from '../_types'
 
-export class PixelBuffer32 implements IPixelData {
+export class PixelBuffer32 implements IPixelData32 {
   readonly data32: Uint32Array
 
   constructor(

package/src/PixelData/PixelData.ts

@@ -1,7 +1,7 @@
 import type { ImageDataLike, IPixelData } from '../_types'
 import { imageDataToUInt32Array } from '../ImageData/imageDataToUInt32Array'
 
-export class PixelData<T extends ImageDataLike = ImageData> implements IPixelData {
+export class PixelData<T extends ImageDataLike = ImageData> implements IPixelData<T> {
   readonly data32: Uint32Array
   readonly imageData: T
   readonly width: number

package/src/PixelData/applyAlphaMaskToPixelData.ts

@@ -1,4 +1,4 @@
-import { type AlphaMask, type ApplyMaskToPixelDataOptions, type Color32, type IPixelData } from '../_types'
+import { type AlphaMask, type ApplyMaskToPixelDataOptions, type Color32, type IPixelData32 } from '../_types'
 
 /**
  * Directly applies a mask to a region of PixelData,
@@ -6,7 +6,7 @@ import { type AlphaMask, type ApplyMaskToPixelDataOptions, type Color32, type IP
  * @returns true if any pixels were actually modified.
  */
 export function applyAlphaMaskToPixelData(
-  dst: IPixelData,
+  dst: IPixelData32,
   mask: AlphaMask,
   opts: ApplyMaskToPixelDataOptions = {},
 ): boolean {

package/src/PixelData/applyBinaryMaskToPixelData.ts

@@ -1,4 +1,4 @@
-import { type ApplyMaskToPixelDataOptions, type BinaryMask, type IPixelData } from '../_types'
+import { type ApplyMaskToPixelDataOptions, type BinaryMask, type IPixelData32 } from '../_types'
 
 /**
  * Directly applies a mask to a region of PixelData,
@@ -6,7 +6,7 @@ import { type ApplyMaskToPixelDataOptions, type BinaryMask, type IPixelData } fr
  * @returns true if any pixels were actually modified.
  */
 export function applyBinaryMaskToPixelData(
-  dst: IPixelData,
+  dst: IPixelData32,
   mask: BinaryMask,
   opts: ApplyMaskToPixelDataOptions = {},
 ): boolean {

package/src/PixelData/blendColorPixelData.ts

@@ -1,4 +1,4 @@
-import { type Color32, type ColorBlendOptions, type IPixelData } from '../_types'
+import { type Color32, type ColorBlendOptions, type IPixelData32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
 
 /**
@@ -6,7 +6,7 @@ import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
  * @returns true if any pixels were actually modified.
  */
 export function blendColorPixelData(
-  dst: IPixelData,
+  dst: IPixelData32,
   color: Color32,
   opts: ColorBlendOptions = {},
 ): boolean {

package/src/PixelData/blendColorPixelDataAlphaMask.ts

@@ -1,4 +1,4 @@
-import type { AlphaMask, Color32, ColorBlendMaskOptions, IPixelData } from '../_types'
+import type { AlphaMask, Color32, ColorBlendMaskOptions, IPixelData32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
 
 /**
@@ -8,14 +8,14 @@ import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
  * If the width (`w`) or height (`h`) are omitted from the options, they will safely
  * default to the dimensions of the provided mask to prevent out-of-bounds memory access.
  *
- * @param dst - The destination {@link IPixelData} buffer to modify.
+ * @param dst - The destination {@link IPixelData32} buffer to modify.
  * @param color - The solid color to apply.
  * @param mask - The mask defining the per-pixel opacity of the target area.
  * @param opts - Configuration options including placement coordinates, bounds, global alpha, and mask offsets.
  * @returns true if any pixels were actually modified.
  */
 export function blendColorPixelDataAlphaMask(
-  dst: IPixelData,
+  dst: IPixelData32,
   color: Color32,
   mask: AlphaMask,
   opts: ColorBlendMaskOptions = {},

package/src/PixelData/blendColorPixelDataBinaryMask.ts

@@ -1,4 +1,4 @@
-import type { BinaryMask, Color32, ColorBlendMaskOptions, IPixelData } from '../_types'
+import type { BinaryMask, Color32, ColorBlendMaskOptions, IPixelData32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
 
 /**
@@ -8,14 +8,14 @@ import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
  * If the width (`w`) or height (`h`) are omitted from the options, they will safely
  * default to the dimensions of the provided mask to prevent out-of-bounds memory access.
  *
- * @param dst - The destination {@link IPixelData} buffer to modify.
+ * @param dst - The destination {@link IPixelData32} buffer to modify.
  * @param color - The solid color to apply.
  * @param mask - The mask defining the per-pixel opacity of the target area.
  * @param opts - Configuration options including placement coordinates, bounds, global alpha, and mask offsets.
  * @returns true if any pixels were actually modified.
  */
 export function blendColorPixelDataBinaryMask(
-  dst: IPixelData,
+  dst: IPixelData32,
   color: Color32,
   mask: BinaryMask,
   opts: ColorBlendMaskOptions = {},

package/src/PixelData/blendPixel.ts

@@ -1,8 +1,8 @@
-import type { BlendColor32, Color32, IPixelData } from '../_types'
+import type { BlendColor32, Color32, IPixelData32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
 
 export function blendPixel(
-  target: IPixelData,
+  target: IPixelData32,
   x: number,
   y: number,
   color: Color32,

package/src/PixelData/blendPixelData.ts

@@ -1,4 +1,4 @@
-import { type Color32, type IPixelData, type PixelBlendOptions } from '../_types'
+import { type Color32, type IPixelData32, type PixelBlendOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
 
 /**
@@ -16,8 +16,8 @@ import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
  * });
  */
 export function blendPixelData(
-  dst: IPixelData,
-  src: IPixelData,
+  dst: IPixelData32,
+  src: IPixelData32,
   opts: PixelBlendOptions = {},
 ): boolean {
   const {

package/src/PixelData/blendPixelDataAlphaMask.ts

@@ -1,9 +1,9 @@
-import { type AlphaMask, type Color32, type IPixelData, type PixelBlendMaskOptions } from '../_types'
+import { type AlphaMask, type Color32, type IPixelData32, type PixelBlendMaskOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
 
 export function blendPixelDataAlphaMask(
-  dst: IPixelData,
-  src: IPixelData,
+  dst: IPixelData32,
+  src: IPixelData32,
   alphaMask: AlphaMask,
   opts: PixelBlendMaskOptions = {},
 ): boolean {

package/src/PixelData/blendPixelDataBinaryMask.ts

@@ -1,9 +1,9 @@
-import type { BinaryMask, Color32, IPixelData, PixelBlendMaskOptions } from '../_types'
+import type { BinaryMask, Color32, IPixelData32, PixelBlendMaskOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
 
 export function blendPixelDataBinaryMask(
-  dst: IPixelData,
-  src: IPixelData,
+  dst: IPixelData32,
+  src: IPixelData32,
   binaryMask: BinaryMask,
   opts: PixelBlendMaskOptions = {},
 ): boolean {

package/src/PixelData/blendPixelDataPaintBuffer.ts

@@ -1,6 +1,6 @@
-import type { BlendColor32, IPixelData } from '../_types'
+import type { BlendColor32, IPixelData32 } from '../_types'
 import { blendPixelData } from './blendPixelData'
-import type { PaintBuffer } from '../PixelTile/PaintBuffer'
+import type { PaintBuffer } from '../Paint/PaintBuffer'
 
 const SCRATCH_OPTS = {
   x: 0,
@@ -11,7 +11,7 @@ const SCRATCH_OPTS = {
 
 export function blendPixelDataPaintBuffer(
   paintBuffer: PaintBuffer,
-  target: IPixelData,
+  target: IPixelData32,
   alpha = 255,
   blendFn?: BlendColor32,
   blendPixelDataFn = blendPixelData,

package/src/PixelData/clearPixelData.ts

@@ -1,4 +1,4 @@
-import type { BinaryMaskRect, Color32, IPixelData } from '../_types'
+import type { BinaryMaskRect, Color32, IPixelData32 } from '../_types'
 import { fillPixelDataFast } from './fillPixelDataFast'
 
 /**
@@ -6,7 +6,7 @@ import { fillPixelDataFast } from './fillPixelDataFast'
  * Internally uses the optimized fillPixelData.
  */
 export function clearPixelData(
-  dst: IPixelData,
+  dst: IPixelData32,
   rect?: Partial<BinaryMaskRect>,
 ): void {
   fillPixelDataFast(dst, 0 as Color32, rect)