import canvasToImage from 'canvas-to-image';

canvasToImage(canvasEl, options);

canvasEl // canvas html element or id attribute of canvas 

options = {
  name: 'custom name', // default image
  type: 'jpg',         // default png, accepted values jpg or png
  quality: 0.4         // default 1, can select any value from 0 to 1 range
}

const canvasEl = document.getElementById('myCanvas');

canvasToImage(canvasEl, {
  name: 'myImage',
  type: 'jpg',
  quality: 0.7
});

canvasToImage('myCanvas', {
  name: 'myImage',
  type: 'png',
  quality: 1
});

or

canvasToImage('myCanvas');

import React, { useRef, useEffect } from 'react';
import canvasToImage from 'canvas-to-image';


const Canvas = props => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#000000';
    ctx.beginPath();
    ctx.arc(50, 100, 20, 0, 2 * Math.PI);
    ctx.fill();
  }, []);

  const handleDownload = async () => {
    canvasToImage(canvasRef.current);
  };

  return (
    <div>
      <canvas ref={canvasRef} {...props} />
      <button onClick={handleDownload}>Download</button>
    </div>
  );
}

export default Canvas;