title: Detect changes to bound width and height attributes of canvas element
body: <p>I have a component based around <code>&lt;canvas [attr.width]='gameWidth' [attr.height]='gameHeight'&gt;&lt;/canvas&gt;</code></p>
  
  <p>On a given event I want to update the properties bound to <code>width</code> and <code>height</code> then re-draw some content into the newly re-sized canvas.</p>
  
  <p>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.  </p>
  
  <p><a href="https://plnkr.co/edit/f1EkUILRycof74ZRjDYe?p=preview" rel="nofollow noreferrer">I made a plunk that shows the problem.</a> Clicking the canvas changes its dimensions just fine but the subsequent call to <code>doRender()</code> has no effect.</p>
  
  <p>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 <code>Observable.timer()</code> to call <code>doRender()</code> 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.</p>
  
  <p>Thanks all</p>