1

I have a component based around <canvas [attr.width]='gameWidth' [attr.height]='gameHeight'></canvas>

On a given event I want to update the properties bound to width and height then re-draw some content into the newly re-sized canvas.

The issue arises when I try to update the bound properties and then immediately trigger a re-draw. The canvas re-sizes but the drawing does not take place.

I made a plunk that shows the problem. Clicking the canvas changes its dimensions just fine but the subsequent call to doRender() has no effect.

I'm assuming there is some delay while the element updates, during which drawing is not possible. In this example I can get round the issue by using Observable.timer() to call doRender() on a delay but this feels dirty and I'd like to know what the underlying problem is here and if there is nicer way to ensure that the canvas context is ready before I start drawing.

Thanks all

popClingwrap
  • 3,919
  • 5
  • 26
  • 44
  • 1
    Angular updates view after calling handleClick handler. Because it is subscrubed to zone.onMicrotaskEmpty. You run `cdRef.detectChanges` and then `doRender` Here is an example https://stackoverflow.com/questions/43457149/angular-4-what-is-the-right-way-to-wait-for-operation/43457771#43457771 – yurzui Oct 04 '17 at 12:10
  • 1
    https://plnkr.co/edit/NYw9j6gvVRqgZzSxBMw6?p=preview – yurzui Oct 04 '17 at 12:12
  • Excellent, thank you. That fixed it – popClingwrap Oct 04 '17 at 13:56

0 Answers0