Canvas to match Parent width / height

[Howl0s]

<div style={width: 900px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 500px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 300px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>

<div style={width: 100px}>
    <Blur style={{width: "100%"}} img={url}></Blur>
</div>
Error:
StackBlur.js:83 Uncaught Error: unable to access image data: IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source height is 0.

[Howl0s]

fitToContainer(canvas);

function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

A possible fix?