Memanggil animasi kembali di objek yang sama

void di sini mengatasi kesalahan ketika di panggil animasi zoom lagi di objek yang sama.

arNil[e.currentTarget.mc].classList.remove("animzoom"); // anim zoom

void arNil[e.currentTarget.mc].offsetWidth; 

arNil[e.currentTarget.mc].classList.add("animzoom"); // anim zoom

dimana  animasi ada di css

.animzoom {

animation: membesarMengecil 0.5s ease-in-out;

}

@keyframes membesarMengecil {

0% {

font-size: 20px;

}

50% {

font-size: 30px;

}

100% {

font-size: 25px;

}

}

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);