Как загрузить изображение в canvas?

Question

[Владимир]

Как загрузить Image на всю ширину/высоту canvas в React? к примеру:

class PlanPage extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.setState({
      canvasA: {
        canvasWidth: 800,
        canvasHeight: 600
      }
    })
  }

  componentDidMount() {
    this.props.getDataMap();  // возвращает объект с полями id,..,URL где лежит картинка
    const { canvasWidth, canvasHeight } = this.state.canvasA;
    this.canvasA.width = canvasWidth;
    this.canvasA.height = canvasHeight;
  }
......
<canvas
  ref={canvasA => this.canvasA = canvasA} /> //сам канвас

Answer 1

[Максим]

Вы можете обратиться к canvas'у через: this.refs.canvasA, далее работайте как обычно, реакт тут уже не должен фигурировать в вопросе. (то есть, вызываете getContext, вызываете drawImage .... )
Пример (без реакта).

Comments

[Владимир]

спасибо!)