<canvas></canvas>
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95vh;
}
canvas {
  /* 样式尺寸 */
  width: 200px;
  height: 200px;
  background-color: #eee;
}

// 在获取 canvas 对象的前一行，加上下面这行注释，即可获得代码补全
/** @type {HTMLCanvasElement} */
const cvs = document.querySelector("canvas");
const ctx = cvs.getContext("2d");

// 原始尺寸 = 样式尺寸 * 缩放倍率
// 初始化canvas原始尺寸
function init() {
  cvs.width = cvs.clientWidth * devicePixelRatio;
  cvs.height = cvs.clientHeight * devicePixelRatio;
}
function draw() {
  init();
  // 开始画图
  ctx.beginPath();
  const r = 80 * devicePixelRatio;
  // 画圆
  ctx.arc(cvs.width / 2, cvs.height / 2, r, 0, Math.PI * 2);
  ctx.strokeStyle = "#f00";
  ctx.lineWidth = 10 * devicePixelRatio;
  ctx.stroke();
  ctx.closePath();
}
draw();
window.onresize = draw;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.