SOURCE

console 命令行工具 X clear

                    
>
console
const containerEl = document.getElementById("container");
const width = containerEl.clientWidth;
const height = containerEl.clientHeight;
const dpr = window.devicePixelRatio || 1;
const canvas = document.getElementById("c1");
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
canvas.width = width * dpr;
canvas.height = height * dpr;

if(canvas.getContext) {
    console.log("yes, drawing context is available!")
    
    const ctx = canvas.getContext("2d");
    ctx.scale(dpr, dpr)

    function drawParentheses(x, y) {
        const radius = 10;
        ctx.beginPath();
        ctx.arc(x, y - radius, radius,  1.5 * Math.PI, 0.5 * Math.PI, false);
        // ctx.arc(x, y + radius, radius, 0.5 * Math.PI, 1.5 * Math.PI, false);
        ctx.stroke();
    }

    drawParentheses(100, 50);
    
} else {
    console.error("sorry, drawing context is not supported by this browser!")
}






<div id="container">
    <canvas id="c1" width="300" height="300"></canvas>
</div>
canvas {
    border: 1px solid black;
}
#container {
    width: 300px;
    height: 300px;
}