在javascript中将图像区域复制到另一个区域

Question

我有两个元素：<div>（大小匹配浏览器视口，但内容溢出;内容和背景图片可由用户拖动）和<canvas>（大小与视口匹配）。

我想让用户能够使用canvas更改div的背景。如何将div背景的适当区域（即style属性中保存的数据URL）复制到画布然后向后复制？

<div style="background:url(data:image/png;base64,...); width:100vw; height:100vh">
  <!-- The div's background can be dragged by user-->

  <!-- Canvas can containe only part of div's bg -->
  <canvas style="width:100vw; height:100vh"></canvas>
</div>