feat: add prop to configure canvasRenderingContext2DSettings (#2104)

* refactor: Optimize useSpriteLoader performance

This commit optimizes the performance of the useSpriteLoader function by adding the 'willReadFrequently' flag to the getContext method call. This flag improves the rendering performance when reading from the canvas context. The change ensures that the getContext method is called with the 'willReadFrequently' flag set to true, which can result in faster rendering of sprite textures.

* add space

* refactor: add canvasRenderingContext2DSettings prop

- Added the canvasRenderingContext2DSettings prop to the SpriteAnimator component in the core module.

* document canvasRenderingContext2DSettings prop

* update docs

docs/loaders/use-sprite-loader.mdx

@@ -11,17 +11,21 @@ Returns: `{spriteTexture:Texture, spriteData:{any[], object}, aspect:Vector3}`
 - spriteData: A collection of the sprite frames, and some meta information (width, height)
 - aspect: Information about the aspect ratio of the sprite sheet
 
-```jsx
-/** The texture url to load the sprite frames from */
-input?: Url | null,
-/** The JSON data describing the position of the frames within the texture (optional) */
-json?: string | null,
-/** The animation names into which the frames will be divided into (optional) */
-animationNames?: string[] | null,
-/** The number of frames on a standalone (no JSON data) spritesheet (optional)*/
-numberOfFrames?: number | null,
-/** The callback to call when all textures and data have been loaded and parsed */
-onLoad?: (texture: Texture, textureData?: any) => void
+```ts
+type Props = {
+  /** The texture url to load the sprite frames from */
+  input?: Url | null
+  /** The JSON data describing the position of the frames within the texture (optional) */
+  json?: string | null
+  /** The animation names into which the frames will be divided into (optional) */
+  animationNames?: string[] | null
+  /** The number of frames on a standalone (no JSON data) spritesheet (optional)*/
+  numberOfFrames?: number | null
+  /** The callback to call when all textures and data have been loaded and parsed */
+  onLoad?: (texture: Texture, textureData?: any) => void
+  /** Allows the configuration of the canvas options */
+  canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings
+}
 ```
 
 ```jsx

docs/misc/sprite-animator.mdx

@@ -63,6 +63,8 @@ type Props = {
   maxItems?: number
   /** External parsed sprite data, usually from useSpriteLoader ready for use */
   spriteDataset?: any
+  /** Allows the configuration of the canvas options */
+  canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings
 }
 ```
 

src/core/SpriteAnimator.tsx

@@ -31,6 +31,7 @@ export type SpriteAnimatorProps = {
   maxItems?: number
   instanceItems?: any[]
   spriteDataset?: any
+  canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings
 } & JSX.IntrinsicElements['group']
 
 type SpriteAnimatorState = {
@@ -79,6 +80,7 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = /* @__PURE__ */ Rea
       maxItems,
       instanceItems,
       spriteDataset,
+      canvasRenderingContext2DSettings,
       ...props
     },
     fref
@@ -100,7 +102,14 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = /* @__PURE__ */ Rea
     const pos = React.useRef(offset)
     const softEnd = React.useRef(false)
     const frameBuffer = React.useRef<any[]>([])
-    const { spriteObj, loadJsonAndTexture } = useSpriteLoader(null, null, animationNames, numberOfFrames)
+    const { spriteObj, loadJsonAndTexture } = useSpriteLoader(
+      null,
+      null,
+      animationNames,
+      numberOfFrames,
+      undefined,
+      canvasRenderingContext2DSettings
+    )
     //
 
     function reset() {}

src/core/useSpriteLoader.tsx

@@ -55,7 +55,8 @@ export function useSpriteLoader<Url extends string>(
   json?: string | null,
   animationNames?: string[] | null,
   numberOfFrames?: number | null,
-  onLoad?: (texture: Texture, textureData?: any) => void
+  onLoad?: (texture: Texture, textureData?: any) => void,
+  canvasRenderingContext2DSettings?: CanvasRenderingContext2DSettings
 ): any {
   const v = useThree((state) => state.viewport)
   const spriteDataRef = React.useRef<any>(null)
@@ -210,7 +211,7 @@ export function useSpriteLoader<Url extends string>(
   const getRowsAndColumns = (texture: THREE.Texture, totalFrames: number) => {
     if (texture.image) {
       const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')
+      const ctx = canvas.getContext('2d', canvasRenderingContext2DSettings)
 
       if (!ctx) {
         throw new Error('Failed to get 2d context')