在python/django中的html画布上绘制形状

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

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // 绘制形状的代码
</script>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillRect(50, 50, 100, 100); // 填充矩形
    ctx.strokeRect(200, 50, 100, 100); // 绘制矩形边框
</script>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(250, 250, 50, 0, 2 * Math.PI); // 绘制圆形路径
    ctx.fillStyle = "red";
    ctx.fill(); // 填充圆形
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 2;
    ctx.stroke(); // 绘制圆形边框
</script>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(100, 200); // 设置起点坐标
    ctx.lineTo(400, 200); // 设置终点坐标
    ctx.strokeStyle = "green";
    ctx.lineWidth = 2;
    ctx.stroke(); // 绘制直线
</script>