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

Animasi rotasi dengan javascript

Kucoba membuat animasi rotasi di javascript. Ini dia :

function mcAnimateRotate(mc){

function animate(timestamp) {

if (!startTime) startTime = timestamp;

const elapsed = timestamp - startTime;

var sdt = Math.min(elapsed / duration * 180 , 180);

mc.style.transform = "rotate("+sdt+"deg)";

if (elapsed < duration) {

requestAnimationFrame(animate);

} else {

// jika selesai

}

}

let startTime = null;// perlu di null kan lagi setiap mau di animasi kan

const duration = 1500; // Durasi 0.5 detik dalam milidetik

requestAnimationFrame(animate);

}