Javascript 将画布元素堆叠在一起-性能如何？

我用这支笔拍了一段视频流。基本上，我正在为每个快照创建一个新画布。然而，我想知道，如果有人有任何意见，这将如何在长期运行？将画布元素堆叠在彼此的顶部，例如将png图像保存在localstorage中，然后循环浏览它们或类似的内容

或者这很好

这是钢笔。

以下是我的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, 0,0, 100, 100); // the video
  document.getElementById("photo").appendChild(canvas);
  
}

---

我认为这里更好的解决方案是将图像以base64字符串的形式存储在数组中，然后在同一画布上绘制图像并对这些图像执行转换。然后，您可以将这些图像存储到localstorage中供以后使用。