Urutan dalam menggambar lingkaran - canvas javascript

Begini urutannya

ctx.clearRect(0,0, canvas.width, canvas.height);

ctx.strokeStyle = '#000000'; // Warna 

ctx.lineWidth = 1; // Ketebalan garis 5px

ctx.lineJoin = "round";

ctx.beginPath();

ctx.arc(xo, yo, rr, sdtRad1, sdtRad2);

ctx.closePath();

ctx.fillStyle = '#ffff00';

ctx.fill();

ctx.stroke();

beginpath dan closepath kemudian baru fill.

clip-path circle - masking bentuk lingkaran

Kebutuhan hanya lingkaran yang bisa di klik. Dan ternyata bisa menggunakan clip-path circle: Gunakan pada css :

            .myCanvas {

position: absolute;

cursor: pointer;

clip-path: circle(100px at 420px 186px);

user-select: none;

-webkit-user-select: none;

}

catatan, clip-path: circle(jari-jari at xpusat ypusat);

ClosePath tidak di pakai ketika hanya sebuah garis (putus) - javascript

Kemarin kebingungan kenapa semua garis berubah jadi putus-putus semua. Ternyata setelah di matikan closePath() hal tersebut tidak terjadi. Kesimpulan saat ini adalah closePath tidak dipakai ketika hanya sebuah garis putus.

ctx.beginPath();

ctx.setLineDash([5, 5]);

ctx.moveTo(x0, y0-dy);

ctx.lineTo(x0, y0+dy);

ctx.lineWidth = 2; // Ketebalan garis 

ctx.strokeStyle = '#FF0000'; // Warna 

//ctx.closePath();

ctx.stroke();