Auto image of the canvas inside the polymer mesh

I have a component that is laid out using polymer-grid-layout, which contains the canvas as the main part of the content. I want the canvas to automatically change depending on the size allocated polymer-grid-layout.

I can’t put it width:100%; height:100%on the canvas, as it just stretches the canvas, making it distorted and grainy. Instead, I wrapped the div around the canvas and manually resized the canvas based on the size of the div in the code.

The code looks somewhat like (note that I did not see the boiler plate, for example, etc.)

<polymer-grid-layout xnodes="{{xnodes}}" 
     layout="[[1, 2, 3],
              [4, 4, 4]]">
</polymer-grid-layout>

<gauge-slider id='front' label='Front'></gauge-slider>
<panel flex></panel>
<gauge-slider id='back' label='Back'></gauge-slider>

<canvas-view id="canvasView" canvasModel="{{canvasModel}}" flex></canvas-view>

where canvas-view contains

<panel id="canvasContainer" flex>
  <canvas id="canvas"></canvas>
</panel>

In the dart code on the canvas, I set the width of the canvas so

void _resize() {
  canvas.width = canvasContainer.clientWidth;
  canvas.height = canvasContainer.clientHeight;

  _redraw();
}

which I call from

@override
void ready() {
  canvas = $['canvas'];
  canvasContainer = $['canvasContainer'];

  // doesn't seem to be a resize on anything other than window!?!
  window.onResize.listen((_) => _resize());
}

and from

@published void set canvasModel(CanvasModel m) {
  _canvasModel = m;

  // TODO: need to build in a delay as otherwise the containing div has not been sized properly yet
  new Timer(new Duration(milliseconds: 50), _resize);
}

. _resize , div . , 50 , .

? - , , , ?

?

, canvasContainer, 0 , .. ?