Variable ImageStim`Const`

ImageStim: (
    props: {
        image?: MaybeGetter<ImageBitmap | ImageData>;
        draw?(ctx: CanvasRenderingContext2D): void;
    },
    ctx: Scene<any>,
) => HTMLCanvasElement = ...

Image stimulus for displaying images or custom canvas drawings

Type Declaration

- (
      props: {
          image?: MaybeGetter<ImageBitmap | ImageData>;
          draw?(ctx: CanvasRenderingContext2D): void;
      },
      ctx: Scene<any>,
  ): HTMLCanvasElement
- Parameters
  - props: {
    image?: MaybeGetter<ImageBitmap | ImageData>;
    draw?(ctx: CanvasRenderingContext2D): void;
    }
  - ctx: Scene<any>
  Returns HTMLCanvasElement

Example

Load image from URL

const bitmap = await window.createImageBitmap(
  await (await fetch('https://picsum.photos/200/300')).blob(),
);
using image = app.scene(ImageStim, {
  defaultProps: { image: bitmap },
});

Draw custom graphics

using image = app.scene(ImageStim, {
  defaultProps: {
    draw(ctx) {
      ctx.fillStyle = 'red';
      ctx.fillRect(10, 10, 100, 100);
      ctx.fillStyle = 'blue';
      ctx.beginPath();
      ctx.arc(60, 60, 30, 0, 2 * Math.PI);
      ctx.fill();
    },
  },
});