如何在‘`rot js`’画布中绘制其他形状或线条？

const R = ROT.Map.Rogue;
const map = new R(30, 30);
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;

map.create(function(x, y, value) {
    if (value === 1) {
        context.fillStyle = "black";
        context.fillRect(x * 20, y * 20, 20, 20);
    }
});

document.body.appendChild(canvas);

const centerX = 300;
const centerY = 300;
const radius = 50;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
context.fillStyle = "blue";
context.fill();

context.beginPath();
context.moveTo(100, 100);
context.lineTo(500, 500);
context.strokeStyle = "red";
context.stroke();

const points = [
    { x: 200, y: 100 },
    { x: 300, y: 200 },
    { x: 200, y: 300 },
    { x: 100, y: 200 }
];

context.beginPath();
context.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
    context.lineTo(points[i].x, points[i].y);
}
context.closePath();
context.fillStyle = "green";
context.fill();