1  
 2  import { FilterState } from '../types';
 3  import { renderFrame } from './glitchRenderer';
 4  
 5  /**
 6   * Draws the image to the canvas and applies filters directly to the pixel data.
 7   * Wrapper around the shared renderFrame function.
 8   */
 9  export const renderToCanvas = (
10    canvas: HTMLCanvasElement,
11    bitmap: ImageBitmap | HTMLVideoElement,
12    filters: FilterState
13  ) => {
14    const ctx = canvas.getContext('2d', { willReadFrequently: true });
15    if (!ctx) return;
16  
17    let width = 0;
18    let height = 0;
19  
20    if (bitmap instanceof ImageBitmap) {
21      width = bitmap.width;
22      height = bitmap.height;
23    } else if (bitmap instanceof HTMLVideoElement) {
24      width = bitmap.videoWidth;
25      height = bitmap.videoHeight;
26    }
27  
28    // Update canvas size to match image if needed
29    if (canvas.width !== width || canvas.height !== height) {
30      canvas.width = width;
31      canvas.height = height;
32    }
33  
34    // Use the shared renderer
35    renderFrame(ctx, bitmap, width, height, filters);
36  };