单击画圆

监听鼠标点击事件，如下代码当鼠标单击会绘制圆形，使用 getBoundingClientRect 函数校正位置

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

context.strokeStyle = '#abcdef';

canvas.addEventListener("click", function (event) {
  var rect = canvas.getBoundingClientRect(),
      x = event.clientX - rect.left,
      y = event.clientY - rect.top;

  console.log(event.clientX);
  console.log(rect.left);
  console.log(rect.top);
  context.beginPath();
  context.arc(x, y, 10, 0, Math.PI * 2);
  context.stroke();
});

效果（单击）：

画笔

代码：

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

var rect,
    mouseX = 0,
    mouseY = 0;

context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

context.strokeStyle = '#B31313';

canvas.addEventListener("mousedown", onMouseDown);

function onMouseDown(event) {
  rect = canvas.getBoundingClientRect();
  mouseX = event.clientX - rect.left;
  mouseY = event.clientY - rect.top;

  canvas.addEventListener("mousemove", onMouseMove);
  document.body.addEventListener("mouseup", onMouseUp);

}

function onMouseMove(event) {
  context.beginPath();
  context.moveTo(mouseX, mouseY);
  rect = canvas.getBoundingClientRect();
  mouseX = event.clientX - rect.left;
  mouseY = event.clientY - rect.top;
  context.lineTo(mouseX, mouseY);
  context.stroke();
}

function onMouseUp(event) {
  canvas.removeEventListener("mousemove", onMouseMove);
  document.body.removeEventListener("mouseup", onMouseUp);
}

效果（可绘制）：

按钮

代码：

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

btn = {
  x: 50,
  y: 50,
  w: 100,
  h: 50,
  selected: false
}

drawButton();

canvas.addEventListener('click', function () {
  var rect = canvas.getBoundingClientRect(),
      x = event.clientX - rect.left,
      y = event.clientY - rect.top;

  if (x >= btn.x && x <= btn.x + btn.y &&
      y >= btn.y && y <= btn.y + btn.h) {
    btn.selected = !btn.selected;
    drawButton();
  }
});

canvas.addEventListener('mousemove', function () {
  var rect = canvas.getBoundingClientRect(),
      x = event.clientX - rect.left,
      y = event.clientY - rect.top;

  if (x >= btn.x && x <= btn.x + btn.y &&
      y >= btn.y && y <= btn.y + btn.h) {
    btn.selected = !btn.selected;
    canvas.style.cursor = 'pointer';
  } else {
    canvas.style.cursor = 'auto';
  }
});

function drawButton() {
  context.fillStyle = btn.selected ? '#388E3C' : '#8BC34A';
  context.fillRect(btn.x, btn.y, btn.w, btn.h);
}

效果（按钮可点击）：

键盘事件

代码：

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    x = 50,
    y = 50;

document.body.addEventListener("keydown", function (event) {
    switch (event.keyCode) {
      case 37: // left
        x--;
        draw();
        break;
      case 39: // right
        x++;
        draw();
        break;        
    }
});

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(x, y, 20, 0, Math.PI * 2);
  context.fill()
}

context.fillStyle = '#C75696';

draw();

效果（键盘左右键）：