Элемент Canvas не изменяется при использовании ReactJS и PaperJS вместе

я обнаружил, что элементы canvas правильно изменяют размер при изменении размера окна, когда они находятся внутри компонентов react. Они также правильно изменяют размер при использовании с PaperJS. Однако они не изменяют размер при использовании с PaperJS и ReactJS вместе.

это несовместимость между PaperJS и ReactJS или я неправильно создаю экземпляр PaperJS? Я звоню!--12-->бумаги.setup (canvas) на componentDidMount функция реагирующего компонента, который содержит элемент canvas. Это правильное место для этого?

Я включил фрагменты кода ниже.

примечание: по какой-то причине функция "запустить фрагмент кода" жалуется на фрагменты ReactJS, поэтому я включил ссылки JSFiddle, которые работают нормально.

PaperJS только [успех] - холст изменяет размер в окне размер https://jsfiddle.net/eadlam/srmracev/

// Instantiate the paperScope with the canvas element
var myCanvas = document.getElementById('myCanvas');
paper.setup(myCanvas);

// Draw a circle in the center
var width = paper.view.size.width;
var height = paper.view.size.height;
var circle = new paper.Shape.Circle({
  center: [width / 2, height / 2],
  fillColor: 'grey',
  radius: 10
});

// render
paper.view.draw();

canvas {
  width: 100%;
  height: 100%;
  border: solid 1px red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-core.min.js"></script>
<canvas id="myCanvas" resize="true"></canvas>

ReactJS только [успех] - холст изменяет размер окна https://jsfiddle.net/eadlam/0de1mpoa/

var Canvas = React.createClass({
  render: function () {
    return <canvas id="myCanvas" resize="true"></canvas>;
  }
});

React.render(<Canvas/>, document.getElementById('container'));

canvas {
  width: 100%;
  height: 100%;
  border: solid 1px red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container"></div>

ReactJS + CanvasJS [FAIL] - Canvas не изменяет размер окна https://jsfiddle.net/eadlam/jLo3opgq/

var Canvas = React.createClass({

    componentDidMount: function () {
        // Instantiate the paperScope with the canvas element
        var myCanvas = document.getElementById('myCanvas');
        paper.setup(myCanvas);
        
        // Draw a circle in the center
        var width = paper.view.size.width;
        var height = paper.view.size.height;
        var circle = new paper.Shape.Circle({
            center: [width / 2, height / 2],
            fillColor: 'grey',
            radius: 10
        });
        
        // render
        paper.view.draw();
    },

    render: function () {
        return <canvas id="myCanvas" resize="true"></canvas>;
    }
});

React.render(<Canvas/>, document.getElementById('container'));

canvas {
  width: 100%;
  height: 100%;
  border: solid 1px red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-core.min.js"></script>

<div id="container"></div>