Javascript 我可以在画布元素上绘制而不破坏先前绘制的内容吗？

假设我想在画布上画一些东西：

function draw() {

    var canvas = document.getElementById('myCanvas');

    ctx = canvas.getContext('2d');
    ctx.canvas.width = 100;
    ctx.canvas.height = 100;

    ctx.fillStyle = 'red';

    ctx.fillRect(0, 0, 50, 50);

}

但后来我想在上面画些别的东西

function drawMore() {

    var canvas = document.getElementById('myCanvas');

    ctx = canvas.getContext('2d');
    ctx.canvas.width = 100;
    ctx.canvas.height = 100;

    ctx.fillStyle = 'blue';

    ctx.fillRect(50, 50, 50, 50);

}

无论如何，我可以在不破坏之前绘制的蓝色块的情况下执行此操作，而不必显式地重新绘制之前的内容（例如，我实际上不知道上面有什么）

谢谢

删除这些行：

ctx.canvas.width = 100;
ctx.canvas.height = 100;

您不需要每次都重置高度和宽度

设置宽度实际上是清除画布的一个技巧