canvas绘图

在react项目中使用canvas绘图,在原有图片上绘制批阅痕迹,
支持撤回功能,保留前面的绘图痕迹,在绘制完毕后合成一张新的图片,

pic可以随便找一张图片

import React, { Component } from 'react';
import "./index.less";
let pic = '...';

class Canvas extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgObj: {},
      isAllowDrawLine: false, //是否允许划线
      finalImg: ''
    }
  }
  componentDidMount() {
    let that = this;
    let canvasPic = new Image();
    canvasPic.setAttribute("crossOrigin", 'Anonymous')
    canvasPic.onload = function () {
      let width = parseInt(canvasPic.width);
      let height = parseInt(canvasPic.height);
      let imgObj = {
        width,
        height,
        url: pic,
        step: -1,
        historyCanvas: []
      }
      that.setState({
        imgObj
      })
    }
    canvasPic.src = pic
  }
  render() {
    let { imgObj,finalImg } = this.state;
    return (
      <div className='canvas_page'
        onMouseUp={(e) => { this.canvasMouseUp(e) }}>
        <button onClick={this.canvasBack}>撤回</button>
        <button onClick={this.hecheng}>合成</button>
        {imgObj && imgObj.url
          ? <div className='canvas_box'>
            <img src={imgObj.url} className='bg_img'
              style={
  { width: '990px', height: parseInt(990 * imgObj.height / imgObj.width) + 'px' }} alt="" />
            <canvas id='myCanvas' width='