Uncodedtech · pull · May 13, 2026 · May 13, 2026 · May 13, 2026 · May 13, 2026
diff --git a/engine/src/Core/CanvasManager.ts b/engine/src/Core/CanvasManager.ts
@@ -5,7 +5,6 @@ import type { Container } from "./Container.js";
 import type { IContainerPlugin } from "./Interfaces/IContainerPlugin.js";
 import type { ICoordinates } from "./Interfaces/ICoordinates.js";
 import type { IDimension } from "./Interfaces/IDimension.js";
-import type { ParticlesCanvasType } from "../Types/ParticlesCanvasType.js";
 import type { PluginManager } from "./Utils/PluginManager.js";
 import { RenderManager } from "./RenderManager.js";
 
@@ -40,7 +39,7 @@ const transferredCanvases = new WeakMap<HTMLCanvasElement, OffscreenCanvas>(),
       throw new TypeError("OffscreenCanvas transfer failed");
     }
   },
-  isHtmlCanvasElement = (canvas: ParticlesCanvasType): canvas is HTMLCanvasElement => {
+  isHtmlCanvasElement = (canvas: HTMLCanvasElement | OffscreenCanvas): canvas is HTMLCanvasElement => {
     return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
   };
 
@@ -106,7 +105,7 @@ export class CanvasManager {
    * The canvas used for rendering and as source for the 2D context.
    * This is an OffscreenCanvas when a DOM canvas is provided.
    */
-  renderCanvas?: ParticlesCanvasType;
+  renderCanvas?: OffscreenCanvas;
 
   /**
    * The particles canvas dimension
@@ -280,7 +279,7 @@ export class CanvasManager {
    * Loads the canvas HTML element
    * @param canvas - the canvas source element or OffscreenCanvas
    */
-  loadCanvas(canvas: ParticlesCanvasType): void {
+  loadCanvas(canvas: HTMLCanvasElement | OffscreenCanvas): void {
     if (this._generated && this.domElement) {
       this.domElement.remove();
     }
@@ -290,7 +289,7 @@ export class CanvasManager {
 
     this.domElement = domCanvas;
     this._generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
-    this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
+    this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : (canvas as OffscreenCanvas);
 
     const domElement = this.domElement;
 

diff --git a/engine/src/Core/Interfaces/IContainerPlugin.ts b/engine/src/Core/Interfaces/IContainerPlugin.ts
@@ -1,4 +1,3 @@
-import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { ExportResult } from "../../Types/ExportResult.js";
 import type { ICoordinates } from "./ICoordinates.js";
 import type { IDelta } from "./IDelta.js";
@@ -16,25 +15,25 @@ export interface IContainerPlugin {
   /** Checks if a particle position is valid, with retry count */
   checkParticlePosition?: (particle: Particle, position: ICoordinates, tryCount: number) => boolean;
   /** Clears plugin-specific drawings from the canvas */
-  clearDraw?: (context: CanvasContextType, delta: IDelta) => void;
+  clearDraw?: (context: OffscreenCanvasRenderingContext2D, delta: IDelta) => void;
   /** Validates a click position */
   clickPositionValid?: (position: ICoordinates) => boolean;
   /** Cleans up plugin resources */
   destroy?: () => void;
   /** Draws plugin content on the canvas */
-  draw?: (context: CanvasContextType, delta: IDelta) => void;
+  draw?: (context: OffscreenCanvasRenderingContext2D, delta: IDelta) => void;
   /** Draws a particle managed by the plugin */
-  drawParticle?: (context: CanvasContextType, particle: Particle, delta: IDelta) => void;
+  drawParticle?: (context: OffscreenCanvasRenderingContext2D, particle: Particle, delta: IDelta) => void;
   /** Cleanup after drawing a particle */
-  drawParticleCleanup?: (context: CanvasContextType, particle: Particle, delta: IDelta) => void;
+  drawParticleCleanup?: (context: OffscreenCanvasRenderingContext2D, particle: Particle, delta: IDelta) => void;
   /** Setup before drawing a particle */
-  drawParticleSetup?: (context: CanvasContextType, particle: Particle, delta: IDelta) => void;
+  drawParticleSetup?: (context: OffscreenCanvasRenderingContext2D, particle: Particle, delta: IDelta) => void;
   /** Applies canvas transform before drawing a particle */
   drawParticleTransform?: (data: IShapeDrawData) => void;
   /** Cleanup after drawing settings */
-  drawSettingsCleanup?: (context: CanvasContextType, delta: IDelta) => void;
+  drawSettingsCleanup?: (context: OffscreenCanvasRenderingContext2D, delta: IDelta) => void;
   /** Setup before drawing settings */
-  drawSettingsSetup?: (context: CanvasContextType, delta: IDelta) => void;
+  drawSettingsSetup?: (context: OffscreenCanvasRenderingContext2D, delta: IDelta) => void;
   /** Exports the container content */
   export?: (type: string, data: Record<string, unknown>) => Promise<ExportResult>;
   /** Initializes the plugin */

diff --git a/engine/src/Core/Interfaces/IDrawParticleParams.ts b/engine/src/Core/Interfaces/IDrawParticleParams.ts
@@ -1,4 +1,3 @@
-import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { Container } from "../Container.js";
 import type { IDelta } from "./IDelta.js";
 import type { IParticleColorStyle } from "./IParticleColorStyle.js";
@@ -20,7 +19,7 @@ export interface IDrawParticleParams {
   /**
    * The canvas context to draw on
    */
-  context: CanvasContextType;
+  context: OffscreenCanvasRenderingContext2D;
   /**
    * This variable contains the delta between the current frame and the previous frame
    */

diff --git a/engine/src/Core/Interfaces/IParticleUpdater.ts b/engine/src/Core/Interfaces/IParticleUpdater.ts
@@ -1,4 +1,3 @@
-import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { IDelta } from "./IDelta.js";
 import type { IParticleColorStyle } from "./IParticleColorStyle.js";
 import type { IParticleTransformValues } from "./IParticleTransformValues.js";
@@ -18,7 +17,7 @@ export interface IParticleUpdater {
   /** Returns custom color styles for a particle */
   getColorStyles?: (
     particle: Particle,
-    context: CanvasContextType,
+    context: OffscreenCanvasRenderingContext2D,
     radius: number,
     opacity: number,
   ) => IParticleColorStyle;

diff --git a/engine/src/Core/Interfaces/IShapeDrawData.ts b/engine/src/Core/Interfaces/IShapeDrawData.ts
@@ -1,4 +1,3 @@
-import type { CanvasContextType } from "../../Types/CanvasContextType.js";
 import type { ICoordinates } from "./ICoordinates.js";
 import type { IDelta } from "./IDelta.js";
 import type { Particle } from "../Particle.js";
@@ -10,7 +9,7 @@ export interface IShapeDrawData<TParticle extends Particle = Particle> {
   /**
    * the canvas context for drawing
    */
-  context: CanvasContextType;
+  context: OffscreenCanvasRenderingContext2D;
 
   /**
    * this variable contains the delta between the current frame and the previous frame

diff --git a/engine/src/Core/RenderManager.ts b/engine/src/Core/RenderManager.ts
@@ -1,7 +1,6 @@
 import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
 import { defaultCompositeValue, defaultTransformValue, minimumSize, zIndexFactorOffset } from "./Utils/Constants.js";
 import { getStyleFromHsl, rangeColorToHsl } from "../Utils/ColorUtils.js";
-import type { CanvasContextType } from "../Types/CanvasContextType.js";
 import type { CanvasManager } from "./CanvasManager.js";
 import type { Container } from "./Container.js";
 import type { IContainerPlugin } from "./Interfaces/IContainerPlugin.js";
@@ -46,7 +45,7 @@ export class RenderManager {
   /**
    * The particles canvas context
    */
-  private _context: CanvasContextType | null;
+  private _context: OffscreenCanvasRenderingContext2D | null;
   private _contextSettings?: CanvasRenderingContext2DSettings;
   private _drawParticlePlugins: IContainerPlugin[];
   private _drawParticlesCleanupPlugins: IContainerPlugin[];
@@ -148,7 +147,7 @@ export class RenderManager {
    * @param cb -
    * @returns the result of the callback
    */
-  draw<T>(cb: (context: CanvasContextType) => T): T | undefined {
+  draw<T>(cb: (context: OffscreenCanvasRenderingContext2D) => T): T | undefined {
     const ctx = this._context;
 
     if (!ctx) {
@@ -403,7 +402,7 @@ export class RenderManager {
    * Sets the canvas rendering context
    * @param context
    */
-  setContext(context: CanvasContextType | null): void {
+  setContext(context: OffscreenCanvasRenderingContext2D | null): void {
     this._context = context;
 
     if (this._context) {
@@ -433,7 +432,7 @@ export class RenderManager {
   };
 
   private readonly _applyPreDrawUpdaters: (
-    ctx: CanvasContextType,
+    ctx: OffscreenCanvasRenderingContext2D,
     particle: Particle,
     radius: number,
     zOpacity: number,

diff --git a/engine/src/Types/CanvasContextType.ts b/engine/src/Types/CanvasContextType.ts
diff --git a/engine/src/Types/ParticlesCanvasType.ts b/engine/src/Types/ParticlesCanvasType.ts
diff --git a/engine/src/Utils/CanvasUtils.ts b/engine/src/Utils/CanvasUtils.ts
@@ -1,5 +1,4 @@
 import { defaultZoom, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
-import type { CanvasContextType } from "../Types/CanvasContextType.js";
 import type { IContainerPlugin } from "../Core/Interfaces/IContainerPlugin.js";
 import type { IDelta } from "../Core/Interfaces/IDelta.js";
 import type { IDimension } from "../Core/Interfaces/IDimension.js";
@@ -15,7 +14,7 @@ import type { Particle } from "../Core/Particle.js";
  * @param dimension - The dimension of the rectangle.
  * @param baseColor - The base color of the rectangle, if not specified a transparent color will be used.
  */
-export function paintBase(context: CanvasContextType, dimension: IDimension, baseColor?: string): void {
+export function paintBase(context: OffscreenCanvasRenderingContext2D, dimension: IDimension, baseColor?: string): void {
   context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
 
   context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
@@ -29,7 +28,7 @@ export function paintBase(context: CanvasContextType, dimension: IDimension, bas
  * @param opacity - The opacity of the image.
  */
 export function paintImage(
-  context: CanvasContextType,
+  context: OffscreenCanvasRenderingContext2D,
   dimension: IDimension,
   image: HTMLImageElement | undefined,
   opacity: number,
@@ -52,7 +51,7 @@ export function paintImage(
  * @param context - The canvas context to clear.
  * @param dimension - The dimension of the canvas.
  */
-export function clear(context: CanvasContextType, dimension: IDimension): void {
+export function clear(context: OffscreenCanvasRenderingContext2D, dimension: IDimension): void {
   context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 
@@ -235,7 +234,7 @@ export function drawShapeBeforeDraw(drawer: IShapeDrawer | undefined, data: ISha
  * @param delta - this variable contains the delta between the current frame and the previous frame
  */
 export function drawParticlePlugin(
-  context: CanvasContextType,
+  context: OffscreenCanvasRenderingContext2D,
   plugin: IContainerPlugin,
   particle: Particle,
   delta: IDelta,

diff --git a/engine/src/export-types.ts b/engine/src/export-types.ts
@@ -74,8 +74,6 @@ export type * from "./Options/Interfaces/Particles/Size/ISizeAnimation.js";
 
 export type * from "./Options/Interfaces/Particles/ZIndex/IZIndex.js";
 
-export type * from "./Types/CanvasContextType.js";
-export type * from "./Types/ParticlesCanvasType.js";
 export type * from "./Types/CustomEventArgs.js";
 export type * from "./Types/CustomEventListener.js";
 export type * from "./Types/EasingFunction.js";

diff --git a/interactions/external/connect/src/Utils.ts b/interactions/external/connect/src/Utils.ts
@@ -1,13 +1,12 @@
+import type { ConnectContainer, LinkParticle } from "./Types.js";
 import {
-  type CanvasContextType,
   type ICoordinates,
   type Particle,
   clamp,
   colorMix,
   getStyleFromHsl,
   getStyleFromRgb,
 } from "@tsparticles/engine";
-import type { ConnectContainer, LinkParticle } from "./Types.js";
 import { drawLine } from "@tsparticles/canvas-utils";
 
 const gradientMin = 0,
@@ -25,7 +24,7 @@ const gradientMin = 0,
  */
 export function gradient(
   container: ConnectContainer,
-  context: CanvasContextType,
+  context: OffscreenCanvasRenderingContext2D,
   p1: Particle,
   p2: Particle,
   opacity: number,
@@ -59,7 +58,7 @@ export function gradient(
  * @param end
  */
 export function drawConnectLine(
-  context: CanvasContextType,
+  context: OffscreenCanvasRenderingContext2D,
   width: number,
   lineStyle: CanvasGradient,
   begin: ICoordinates,
@@ -81,7 +80,7 @@ export function drawConnectLine(
  */
 export function lineStyle(
   container: ConnectContainer,
-  ctx: CanvasContextType,
+  ctx: OffscreenCanvasRenderingContext2D,
   p1: Particle,
   p2: Particle,
 ): CanvasGradient | undefined {

diff --git a/interactions/external/grab/src/Utils.ts b/interactions/external/grab/src/Utils.ts
@@ -1,5 +1,5 @@
-import { type CanvasContextType, type ICoordinates, type IRgb, getStyleFromRgb } from "@tsparticles/engine";
 import type { GrabContainer, LinkParticle } from "./Types.js";
+import { type ICoordinates, type IRgb, getStyleFromRgb } from "@tsparticles/engine";
 import { drawLine } from "@tsparticles/canvas-utils";
 
 const defaultWidth = 0;
@@ -15,7 +15,7 @@ const defaultWidth = 0;
  * @param hdr - Whether the line should be drawn in HDR mode or not.
  */
 export function drawGrabLine(
-  context: CanvasContextType,
+  context: OffscreenCanvasRenderingContext2D,
   width: number,
   begin: ICoordinates,
   end: ICoordinates,

diff --git a/interactions/light/src/Utils.ts b/interactions/light/src/Utils.ts
@@ -1,11 +1,4 @@
-import {
-  type CanvasContextType,
-  type ICoordinates,
-  doublePI,
-  getStyleFromRgb,
-  half,
-  quarter,
-} from "@tsparticles/engine";
+import { type ICoordinates, doublePI, getStyleFromRgb, half, quarter } from "@tsparticles/engine";
 import type { LightContainer, LightParticle } from "./Types.js";
 
 const gradientPos = {
@@ -25,7 +18,11 @@ export const lightMode = "light";
  * @param context
  * @param mousePos
  */
-export function drawLight(container: LightContainer, context: CanvasContextType, mousePos: ICoordinates): void {
+export function drawLight(
+  container: LightContainer,
+  context: OffscreenCanvasRenderingContext2D,
+  mousePos: ICoordinates,
+): void {
   const lightOptions = container.actualOptions.interactivity?.modes.light?.area;
 
   if (!lightOptions) {
@@ -65,7 +62,7 @@ export function drawLight(container: LightContainer, context: CanvasContextType,
  */
 export function drawParticleShadow(
   container: LightContainer,
-  context: CanvasContextType,
+  context: OffscreenCanvasRenderingContext2D,
   particle: LightParticle,
   mousePos: ICoordinates,
 ): void {

diff --git a/interactions/particles/links/src/LinkInstance.ts b/interactions/particles/links/src/LinkInstance.ts
@@ -1,5 +1,4 @@
 import {
-  type CanvasContextType,
   type IContainerPlugin,
   type IRgb,
   type PluginManager,
@@ -33,7 +32,7 @@ export class LinkInstance implements IContainerPlugin {
     this._freqs = { links: new Map(), triangles: new Map() };
   }
 
-  drawParticle(context: CanvasContextType, particle: LinkParticle): void {
+  drawParticle(context: OffscreenCanvasRenderingContext2D, particle: LinkParticle): void {
     const { links, options } = particle;
 
     if (!links?.length || !options.links) {
@@ -192,7 +191,7 @@ export class LinkInstance implements IContainerPlugin {
     p1Destinations: Set<number>,
     pos1: ReturnType<LinkParticle["getPosition"]>,
     pos2: ReturnType<LinkParticle["getPosition"]>,
-    context: CanvasContextType,
+    context: OffscreenCanvasRenderingContext2D,
   ): void {
     const p2 = link.destination,
       triangleOptions = options.links?.triangles;

diff --git a/plugins/absorbers/src/AbsorberInstance.ts b/plugins/absorbers/src/AbsorberInstance.ts
@@ -1,5 +1,4 @@
 import {
-  type CanvasContextType,
   type Container,
   type ICoordinates,
   type IDelta,
@@ -230,7 +229,7 @@ export class AbsorberInstance {
    * The draw method, for drawing the absorber in the canvas
    * @param context - the canvas 2d context used for drawing
    */
-  draw(context: CanvasContextType): void {
+  draw(context: OffscreenCanvasRenderingContext2D): void {
     context.translate(this.position.x, this.position.y);
     context.beginPath();
     context.arc(originPoint.x, originPoint.y, this.size, minAngle, maxAngle, false);

diff --git a/plugins/absorbers/src/AbsorbersPluginInstance.ts b/plugins/absorbers/src/AbsorbersPluginInstance.ts
@@ -1,5 +1,4 @@
 import {
-  type CanvasContextType,
   type IContainerPlugin,
   type IDelta,
   type Particle,
@@ -22,7 +21,7 @@ export class AbsorbersPluginInstance implements IContainerPlugin {
     this._instancesManager.initContainer(container);
   }
 
-  draw(context: CanvasContextType): void {
+  draw(context: OffscreenCanvasRenderingContext2D): void {
     for (const absorber of this._instancesManager.getArray(this._container)) {
       absorber.draw(context);
     }

diff --git a/plugins/backgroundMask/src/BackgroundMaskPluginInstance.ts b/plugins/backgroundMask/src/BackgroundMaskPluginInstance.ts
@@ -1,5 +1,4 @@
 import {
-  type CanvasContextType,
   type IContainerPlugin,
   type PluginManager,
   getStyleFromRgb,
@@ -48,15 +47,15 @@ export class BackgroundMaskPluginInstance implements IContainerPlugin {
     return true;
   }
 
-  drawSettingsCleanup(context: CanvasContextType): void {
+  drawSettingsCleanup(context: OffscreenCanvasRenderingContext2D): void {
     if (!this._defaultCompositeValue) {
       return;
     }
 
     context.globalCompositeOperation = this._defaultCompositeValue;
   }
 
-  drawSettingsSetup(context: CanvasContextType): void {
+  drawSettingsSetup(context: OffscreenCanvasRenderingContext2D): void {
     const previousComposite = context.globalCompositeOperation,
       backgroundMask = this._container.actualOptions.backgroundMask;