SolidJS•2y ago

problem with canvas

I'm having a quite weird problem currently. I am trying to port react-snowfall to solid (https://github.com/apollo79/solid-snowfall) and therefore working with a canvas. The code is, simplified like this:

const [canvasRef, setCanvasRef] = createSignal<HTMLCanvasElement>(null as unknown as HTMLCanvasElement);
const ctx = () => canvasRef().getContext("2d");

let animationFrame = 0;
let lastUpdate = Date.now();

const snowflakes = createSnowFlakes(canvasRef, snowflakeCount as Accessor<number>, config);

const render = (framesPassed = 1) => {
  if (canvasRef()) {
    // Update the positions of the snowflakes
    snowflakes.forEach((snowflake) => {
      snowflake.update(canvasRef, framesPassed as number);
    });

    // Render them if the canvas is available
    if (ctx()) {
      ctx()!.setTransform(1, 0, 0, 1, 0, 0);
      ctx()!.clearRect(0, 0, canvasRef().offsetWidth, canvasRef().offsetHeight);

      snowflakes.forEach((snowflake) => snowflake.draw(ctx()!));
    }
  }
};

const loop = () => {
  // Update based on time passed so that a slow frame rate won't slow down the snowflake
  const now = Date.now();
  const msPassed = Date.now() - lastUpdate;
  lastUpdate = now;

  // Frames that would have passed if running at 60 fps
  const framesPassed = msPassed / targetFrameTime;

  render(framesPassed);

  animationFrame = requestAnimationFrame(loop);
};

createEffect(() => {
  loop();
  onCleanup(() => cancelAnimationFrame(animationFrame));
});

const [canvasRef, setCanvasRef] = createSignal<HTMLCanvasElement>(null as unknown as HTMLCanvasElement);
const ctx = () => canvasRef().getContext("2d");

let animationFrame = 0;
let lastUpdate = Date.now();

const snowflakes = createSnowFlakes(canvasRef, snowflakeCount as Accessor<number>, config);

const render = (framesPassed = 1) => {
  if (canvasRef()) {
    // Update the positions of the snowflakes
    snowflakes.forEach((snowflake) => {
      snowflake.update(canvasRef, framesPassed as number);
    });

    // Render them if the canvas is available
    if (ctx()) {
      ctx()!.setTransform(1, 0, 0, 1, 0, 0);
      ctx()!.clearRect(0, 0, canvasRef().offsetWidth, canvasRef().offsetHeight);

      snowflakes.forEach((snowflake) => snowflake.draw(ctx()!));
    }
  }
};

const loop = () => {
  // Update based on time passed so that a slow frame rate won't slow down the snowflake
  const now = Date.now();
  const msPassed = Date.now() - lastUpdate;
  lastUpdate = now;

  // Frames that would have passed if running at 60 fps
  const framesPassed = msPassed / targetFrameTime;

  render(framesPassed);

  animationFrame = requestAnimationFrame(loop);
};

createEffect(() => {
  loop();
  onCleanup(() => cancelAnimationFrame(animationFrame));
});

Where the createSnowFlakes function just creates an array of snowflakes and handles config updates. The weird thing now is, that everything gets executed, the loop works and the snowflake.draw() methods is called, but nothing appears on the screen. Maybe this is a problem with the context or the canvas ref? I don't get it

GitHub

GitHub - apollo79/solid-snowfall: A solid component that creates a ...

A solid component that creates a snowfall effect. Contribute to apollo79/solid-snowfall development by creating an account on GitHub.

1 Reply

apollo79OP•2y ago

Okay, I fixed this now. It had to do with a memo I used where I shouldn't have. I don't really get why that didn't work, but anyway it works now

Gaming

Programming

problem with canvas