Javascript 在HTML5画布中，单击按钮是否更改形状？

我只是想知道，有没有任何网站，提供有关画布的简要信息。 我正在做我的项目。其中一个画布和4个按钮。 这是四个按钮：圆形、矩形、方形和动画彩虹

当我在画布上单击“圆形”按钮时，当我单击“矩形”按钮时会显示动画“圆形”，即时间圆在动画中以“轻松输入/输出”样式更改为矩形。形状更改为另一个形状，但在画布上以动画样式显示

我读了很多文章，看了很多视频，但我找不到解决办法。 下面我展示了一幅图片

如果有人告诉我，并给我一些建议，我去哪里学习。

---

谢谢。

在JavaScript圆形、矩形、方形和彩虹中创建4个不同的函数。 在这样的情况下，做4个不同的类。 然后根据JavaScript函数中的形状设置convas类的值。 就像你点击圆圈按钮一样。 首先设置HTML代码

<button id = "circle" onclick ="circle"></button>

function circle(){
    canvas = document.getElementById("canvas");
    canvas.class = "circle";
    //This is class name which you have to make in case
}