HTML5 Canvas - рисовать

Question

Пример круга приведен ниже

Вот мой код JavaScript.

<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>

Answer 1

Предполагая, что ваш randomColor правильный, все, что вам нужно, это:

• Удалить context.clearRect из canvas.onclick
• Переместить context.beginPath на canvas.onclick

Вот рабочий образец

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

function randomColor() {
  colorArray = ["red", "blue", "green", "lime", "orange", "cyan"]
  return colorArray[Math.floor(Math.random() * colorArray.length)];
}


// click event handler
canvas.onclick = function(e) {
  x = e.clientX - e.target.offsetLeft;
  y = e.clientY - e.target.offsetTop;

  context.beginPath();
  context.fillStyle = randomColor();
  context.arc(x, y, 25, 0, 2 * Math.PI, true);
  context.fill();
}

<canvas id="testCanvas" style="border:1px solid #000000;"></canvas>