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

ctx.beginPath();
ctx.arc(70, 70, 50, Math.PI/8, -Math.PI/8, false);
ctx.lineTo(65,70);
ctx.closePath();
ctx.strokeStyle = "black";
ctx.fillStyle = "yellow";
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(75, 45, 4, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();

function creatDots(amountOfDots){
    let directionX = 50;
    for(let i=0;i<amountOfDots;i++){
        ctx.beginPath();
        ctx.arc(directionX=directionX+50, 70, 5, 0, 2 * Math.PI, false);
        ctx.fillStyle ="yellow";
        ctx.fill()  
        ctx.stroke();
    }
}
creatDots(8)


canvas.addEventListener("click", paint);

function paint(e){
    ctx.beginPath();
    ctx.arc(e.layerX, e.layerY, 5, 0, 2 * Math.PI, false);
    ctx.fillStyle ="red";
    ctx.fill()  
    ctx.stroke();
}