Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correct way to replay drawCalls? #122

Open
ImLunaHey opened this issue Jul 24, 2024 · 0 comments
Open

Correct way to replay drawCalls? #122

ImLunaHey opened this issue Jul 24, 2024 · 0 comments

Comments

@ImLunaHey
Copy link

I'm trying to replay the draw calls using @napi-rs/canvas so I can use image snapshots.

  1. Is there a better way to do this?
  2. Could something like this be added to this library? (maybe under a flag?)
// get the draw calls
const drawCalls = document.querySelector('canvas')!.getContext('2d')!.__getDrawCalls();
const canvas = createCanvas(document.querySelector('canvas')!.width, document.querySelector('canvas')!.height);
const ctx = canvas.getContext('2d');

// clear the canvas
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// replay the draw calls
for (const call of drawCalls) {
  ctx.setTransform(...call.transform);
  switch (call.type) {
    case 'clearRect':
      ctx.clearRect(call.props.x, call.props.y, call.props.width, call.props.height);
      break;
    case 'fillRect':
      ctx.fillRect(call.props.x, call.props.y, call.props.width, call.props.height);
      break;
    case 'fillText':
      ctx.fillText(call.props.text, call.props.x, call.props.y);
      break;
    case 'stroke':
      for (const path of call.props.path) {
        switch (path.type) {
          case 'beginPath':
            ctx.beginPath();
            break;
          case 'moveTo':
            ctx.moveTo(path.props.x, path.props.y);
            break;
          case 'lineTo':
            ctx.lineTo(path.props.x, path.props.y);
            break;
          case 'arc':
            ctx.arc(path.props.x, path.props.y, path.props.radius, path.props.startAngle, path.props.endAngle);
            break;
          default:
            throw new Error(`Unknown path type: ${path.type}`);
        }
        ctx.stroke();
      }
      break;
    case 'fill':
      for (const path of call.props.path) {
        switch (path.type) {
          case 'moveTo':
            ctx.moveTo(path.props.x, path.props.y);
            break;
          case 'lineTo':
            ctx.lineTo(path.props.x, path.props.y);
            break;
          case 'arc':
            ctx.arc(path.props.x, path.props.y, path.props.radius, path.props.startAngle, path.props.endAngle);
            break;
          default:
            throw new Error(`Unknown path type: ${path.type}`);
        }
        ctx.fill();
      }
      break;
    default:
      throw new Error(`Unknown draw call type: ${call.type}`);
  }
}

// expect the canvas to match the image snapshot
expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant