<canvas id="canvas" width="500" height="150"></canvas>
#canvas {
  background: #ccc;
  border-radius: 10px;
}
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(110, 10)
ctx.lineTo(110, 110)
ctx.lineTo(10, 110)
// 有宽度的线条坐标以其中心为基点,所以需要减去其宽度的一半以形成闭环
ctx.lineTo(10, 5)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.stroke()
ctx.closePath()
console.log(canvas.toDataURL())
ctx.beginPath()
ctx.moveTo(300, 10)
ctx.lineTo(400, 10)
ctx.lineTo(400, 110)
ctx.lineTo(300, 110)
// 此处不用减一半直径,是因为添加了结尾线帽
ctx.lineTo(300, 10)
ctx.lineWidth = 10
ctx.strokeStyle = '#000'
ctx.lineCap = 'round'
ctx.lineJoin = 'round'
ctx.stroke()
ctx.closePath()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.