Отслеживание клика по canvas элементам
Есть canvas, там нарисованы 5 больших звезд (разного цвета) и 5 маленьких (черного). Нужно при клике на большую звезду любого цвета (например:красного), маленькие приняли такой же цвет. А при клике вне элементов (на белую область) становились белого. Подскажите пожалуйста, как это можно реализовать? Буду благодарен.
document.addEventListener('DOMContentLoaded', function(){
var canvasBig = document.getElementById('big');
var context = canvasBig.getContext('2d');
function drawStar (cx, cy, spikes, outerRadius, innerRadius, color) {
var step = Math.PI / spikes;
var rot = Math.PI / 2 * 3;
var x = cx;
var y = cy;
context.strokeSyle = color;
context.beginPath();
context.moveTo(cx, cy - outerRadius)
for (i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
context.lineTo(x, y)
rot += step
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
context.lineTo(x, y)
rot += step
}
context.lineTo(cx, cy - outerRadius)
context.closePath();
context.lineWidth=5;
context.strokeStyle=color;
context.stroke();
context.fillStyle=color;
context.fill();
}
drawStar(70, 70, 5, 50, 15, '#ed0909');
drawStar(300, 70, 5, 50, 15, '#0924ed');
drawStar(500, 70, 5, 50, 15, '#11f721');
drawStar(70, 200, 5, 50, 15, '#f5e90c');
drawStar(300, 200, 5, 50, 15,'#000000');
drawStar(30, 400, 5, 15, 5,);
drawStar(90, 400, 5, 15, 5,);
drawStar(150, 400, 5, 15, 5,);
drawStar(210, 400, 5, 15, 5,);
drawStar(270, 400, 5, 15, 5,);
});