前端 canvas 绘制矩形，不覆盖瀑布图

Canvas 是 HTML5 中的一个标签，它提供了一种在网页上绘制图形的强大工具。如果你想在 Canvas 上绘制矩形而不覆盖已有的内容，比如瀑布图，你可以通过以下步骤操作：

1. **获取画布**：首先需要获取到 canvas 元素以及其上下文 `ctx`。例如：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

2. **设置坐标系统**：在绘制新矩形之前，确保你在正确的坐标位置开始，可以先保存当前的绘图状态，然后定位到你想绘制的位置：

ctx.save();
// 设置矩形左上角坐标
ctx.beginPath();

3. **绘制矩形**：使用 `rect()` 方法指定矩形的四个顶点，如 x、y、宽度和高度：

ctx.rect(x, y, width, height);

4. **填充或描边**：如果你想只是画出轮廓，调用 `strokeRect()`；如果要填充颜色，用 `fillRect()`，记得在绘制完后恢复绘图状态：

if (youWantToFill) {
    ctx.fillStyle = 'yourColor';
    ctx.fill();
} else {
    ctx.strokeStyle = 'yourColor';
    ctx.stroke();
}
ctx.restore(); // 恢复到原始状态

5. **处理瀑布图**：如果你的瀑布图已经在 canvas 上，你需要确保新绘制的矩形不会与其重叠。这通常意味着你需要在添加新矩形前检查它们的位置是否冲突。