这里用背景颜色只是示意，实际上图层都是透明
代码实现
用一个父元素作为容器，把所有的元素设置成一样的宽高并放在里面重叠。
<div class="container">
<canvas width="500" height="500"></canvas>
<canvas width="500" height="500"></canvas>
<canvas width="500" height="500"></canvas>
<canvas width="500" height="500"></canvas>
<canvas width="500" height="500"></canvas>
</div>
使用临时图层
绘制是很耗性能的，如果每次都清空画布然后重新画一次，那么性能会消耗很大（即使分了几个图层），我们应区分“变”与“不变”的部分，只对“变”的部分重新渲染，“不变”的部分不渲染，将经常变化的部分抽离到临时图层，这样仅需要渲染临时图层，临时图层有几种实现思路，一种是使用操作图层（俗称高性能图层），一种是使用隐藏图层（不绘制到界面上的）
高性能图层
一般高频(实时响应鼠标、键盘等事件）的操作会放在高性能图层，等操作完成之后，再将最终结果保存到其它图层，比如绘制、拖拽、缩放一个（或一批）shape
隐藏图层
有些图层是不用给用户看的，这些canvas仅存在于内存中，不会插入html的dom中，用完就销毁，比如常见的canvas to image。
还有一种实现方式是离屏渲染(OffscreenCanvas)，先在一个offCanvas操作，然后再将结果渲染到界面上（有点像虚拟dom操作），一般会结合webworker或webassembly
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// 绘制图片，或其它操作
context.drawImage();
// 转成base64图片
convas.toDataUrl();
影响canvas性能的除了绘制频率，还有一个重要的是像素点操作，一般图像处理会涉及到大量的像素点操作，如果放在主线程计算，那么会卡住其它操作，造成页面卡顿，特别影响用户体验，这些涉及大量计算的一般会单独开个线程来操作，而在浏览器中有这个能力的就只有webworker了。
有了webworker可能还不够，因为始终是在js上执行，js执行效率天生就比其它语言慢，所以一般的会使用webassembly，执行效率比js快很多，而且还能用到更丰富的图像处理库
如果还有更高的性能要求，那么普通的2d canvas可能就无法满足了，这个时候可以使用webgl，性能更高（当然学习成本也更高），再结合wasm，就可以有无限想象力了，鼎鼎大名的figma就是用webgl wasm(rust)实现的，另外google doc在线文档也使用了webgl，飞书文档将来也会替换成wegbl，基于浏览器的渲染始终有诸多限制，一般有能力的都会实现自己的渲染引擎。
业务中图片缩放的实现设计假设canvas大小为（867，350）
图片的大小为（768，576）
将上面这张图片放到canvas中，图片贴边处理，也即图片太大就缩小，图片太小就放大。那么我们如何实现这种效果呢？
