SOURCE

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function draw() {
  ctx.beginPath();
  ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
  ctx.moveTo(110, 75);
  ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
  ctx.moveTo(65, 65);
  ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
  ctx.moveTo(95, 65);
  ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
  ctx.stroke();
}
draw();

function windowToCanvas(x, y) {
  var bbox = canvas.getBoundingClientRect();
  return {
    x: x - bbox.left,
    y: y - bbox.top
  }
}

var mouseDown = false;
var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
canvas.onmousedown = (e) =>{
  mouseDown = true;
  { x: startX, y: startY } = windowToCanvas(e.clientX, e.clientY);
  console.log(startX, startY);
  ctx.moveTo(startX, startY);
  // cts.gra
}

canvas.onmouseup = (e) =>{
  mouseDown = false;
  var { x: endX, y: endY } = windowToCanvas(e.clientX, e.clientY);
  ctx.strokeRect(startX, startY, endX-startX, endY-startY);
}

// canvas.onmousemove = (e) =>{
//   if (mouseDown) {
//     var { x, y } = windowToCanvas(e.clientX, e.clientY);
//     // console.log(x, y);
//     ctx.lineTo(x, y);
//     ctx.stroke();
//   }
// }

<canvas id="canvas" width="500" height="500">
</canvas>

#canvas {
  border: 1px solid grey
}