如何在画布上绘制对象？

<canvas id="myCanvas" width="500" height="500"></canvas>

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

ctx.fillStyle = "red"; // 设置填充颜色
ctx.fillRect(50, 50, 100, 100); // 绘制矩形，参数分别为起始点的x坐标、y坐标、宽度、高度

ctx.beginPath(); // 开始路径
ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 绘制圆形，参数分别为圆心的x坐标、y坐标、半径、起始角度、结束角度
ctx.fillStyle = "blue"; // 设置填充颜色
ctx.fill(); // 填充圆形

ctx.beginPath(); // 开始路径
ctx.moveTo(300, 300); // 移动到起始点的x坐标、y坐标
ctx.lineTo(400, 400); // 绘制直线到目标点的x坐标、y坐标
ctx.strokeStyle = "green"; // 设置线条颜色
ctx.lineWidth = 2; // 设置线条宽度
ctx.stroke(); // 绘制线条

ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布上的内容