【Riot.js】canvasタグのwidthとheightがデフォルトのままで変わらない

Question

直接書き込めばちゃんとそれ通りのwidthとheightになるんですが、riotの下記の書き方だとデフォルトのwidth300pxとheight150pxが反映されてしまいます。

<canvas width="{ canvasWidth }" height="{ canvasHeight }" ref="canvas"></canvas>

var style = tag.refs.uploadWrapper.currentStyle || document.defaultView.getComputedStyle(tag.refs.uploadWrapper, '')
tag.canvasWidth = style.width
tag.canvasHeight = parseFloat(tag.canvasWidth) / 16 * 9 + 'px'

grandParentTag.refs.canvas.getContext('2d').drawImage(this.refs.video, 0, 0, parseFloat(grandParentTag.canvasWidth), grandParentTag.canvasHeight)

Answer 1

setAttributeで直接変更すれば、デフォルトのwidthとheightを変更できました

var style = tag.refs.uploadWrapper.currentStyle || document.defaultView.getComputedStyle(tag.refs.uploadWrapper, '')
tag.refs.canvas.setAttribute('width', style.width)
tag.refs.canvas.setAttribute('height', parseFloat(style.width) / 16 * 9 + 'px')
tag.canvasWidth = style.width
tag.canvasHeight = parseFloat(style.width) / 16 * 9 + 'px'

grandParentTag.refs.canvas.getContext('2d').drawImage(this.refs.video, 0, 0, parseFloat(grandParentTag.canvasWidth), parseFloat(grandParentTag.canvasHeight))

動的にcanvasのサイズを変更