let ctx = canvas.getContext('2d')

ctx.beginPath();
// 1,2: x и y от начала координат;
// 3: радиус
// 4,5: начало и конец отрисовки
// 6: направление отрисовки
ctx.arc(100, 100, 10, 0, 1.5 * Math.PI, false);
// ctx.lineTo(50, 50)   // зависит только от начальной точки канваса
ctx.closePath()
ctx.fillStyle = '#00FF00' 
ctx.fill()
ctx.stroke();


canvas.onclick = (e) => {
    // console.log(e)

    ctx.beginPath();
    ctx.arc(e.layerX, e.layerY, radiusInput.value ? radiusInput.value : 5, 0, 1.5 * Math.PI, false);
    ctx.closePath()
    ctx.fillStyle = colorInput.value
    ctx.fill()
    ctx.stroke();
}












function getRandomInt(min, max) {
    return Math.round(Math.random() * (max - min)) + min; 
}



randomBtn.onclick = () => {
    let x = getRandomInt(0, 400)
    let y = getRandomInt(0, 400)
    let radius = getRandomInt(1, 50)
    let r = getRandomInt(0, 255)
    let g = getRandomInt(0, 255)
    let b = getRandomInt(0, 255)

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 1.5 * Math.PI, false);
    ctx.closePath()
    ctx.fillStyle = ` rgb(${r}, ${g}, ${b})`
    ctx.fill()
    ctx.stroke();
}

// for (let index = 0; index < 10000; index++) {
//     let x = getRandomInt(0, 400)
//     let y = getRandomInt(0, 400)
//     let radius = getRandomInt(1, 5)
//     let r = getRandomInt(0, 255)
//     let g = getRandomInt(0, 255)
//     let b = getRandomInt(0, 255)

//     ctx.beginPath();
//     ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
//     ctx.closePath()
//     ctx.fillStyle = ` rgb(${r}, ${g}, ${b})`
//     ctx.fill()
//     ctx.stroke();    
// }


// three.js babylon.js