Canvas drawing is slow

问题

I have a React page that draw about 15K lines on a canvas. If I draw on a canvas that's not in the document.body, the UI is responsive. The moment I draw the lines on a canvas that's in the document.body, the UI is very slow.

There's the code:

  render() {
    if (this.canvasRef.current && this.state.chartData) {
      const canvas = document.createElement("canvas")
      canvas.width = 1000;
      canvas.height = 800;
      drawChart(canvas, this.state.chartData);
    }

    return (
      <div>
        <canvas ref={this.canvasRef} height={800} width={1000} />
      </div>
    );
  }
}

Notice if I call the drawChart as

drawChart(this.canvasRef.current, this.state.chartData);

The UI is extremely slow.

But calling

drawChart(canvas, this.state.chartData);

The UI is fast.

I also tried copying the drawn canvas to this.canvasRef.current, no help.

来源：https://stackoverflow.com/questions/59596826/canvas-drawing-is-slow