将画布元素堆叠在彼此之上-性能？

如何解决将画布元素堆叠在彼此之上-性能？

我得到了这支笔，我在这里拍摄视频流的快照。基本上，我为每个快照创建一个新的画布。但是，如果有人有任何意见，我会很伤心，从长远来看它将如何执行？相比之下，将画布元素堆叠在彼此的顶部，例如将png图像保存在本地存储中，然后遍历它们或类似的东西。

或者这很好吗？

这是笔。 https://codepen.io/haangglide/pen/ExyOrrX

这是我的JavaScript：

const vid = document.querySelector('video');
navigator.mediaDevices.getUserMedia({video: true}) // request cam
.then(stream => {
  vid.srcObject = stream; // don't use createObjectURL(MediaStream)
  return vid.play(); // returns a Promise
})
.then(()=>{ // enable the button
  const btn = document.querySelector('button');
  btn.disabled = false;
  btn.onclick = e => {
    takeASnap()
  };
});

function takeASnap(){
  let x = Math.floor(Math.random() * 20); 
  let y = Math.floor(Math.random() * 20);  
    let r = Math.floor(Math.random() * 21) - 10; 

  const canvas = document.createElement('canvas'); // create a canvas
  const ctx = canvas.getContext('2d'); // get its context
  canvas.width = 100; // set its size to the one of the video
  canvas.height = 100;
  
  canvas.style.position = "absolute";
  canvas.style.left = x+'px';
  canvas.style.top = y+'px';
  canvas.style.webkitTransform = 'rotate('+r+'deg)'; 
  canvas.style.mozTransform    = 'rotate('+r+'deg)'; 
  canvas.style.msTransform     = 'rotate('+r+'deg)'; 
  canvas.style.oTransform      = 'rotate('+r+'deg)'; 
  canvas.style.transform       = 'rotate('+r+'deg)'; 
 
  ctx.drawImage(vid,100,100); // the video
  document.getElementById("photo").appendChild(canvas);
  
}