スキルテスト: イベント

p {
  color: purple;
  margin: 0.5em 0;
}
* {
  box-sizing: border-box;
}
button {
  display: block;
  margin: 20px 0 20px 20px;
}
canvas {
  border: 1px solid black;
}

<button class="off">マシンはオフです</button>

const btn = document.querySelector("button");
// ここにコードを追加

<canvas width="480" height="320" tabindex="0"> </canvas>

* {
  box-sizing: border-box;
}
canvas {
  border: 1px solid black;
}

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
function drawCircle(x, y, size) {
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.arc(x, y, size, 0, 2 * Math.PI);
  ctx.fill();
}
let x = 50;
let y = 50;
const size = 30;
drawCircle(x, y, size);
// 以上のコードは編集しないでください。
// ここにコードを追加

<div class="button-bar">
  <button data-color="red">Red</button>
  <button data-color="yellow">Yellow</button>
  <button data-color="green">Green</button>
  <button data-color="purple">Purple</button>
</div>

* {
  box-sizing: border-box;
}
html,
body,
.button-bar {
  height: 100%;
}
.button-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
button {
  padding: 5px 10px;
}

const buttonBar = document.querySelector(".button-bar");
// ここにコードを追加