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.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;
}