solusi ctx.clearRect jika tidak bekerja

Agar ctx.clearRect bisa bekerja, masukkan ctx.beginPath

Seperti ini :

function DrawGaris(canv,arxy){

const canvas = document.getElementById(canv);

const ctx = canvas.getContext('2d');

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

ctx.beginPath();

ctx.moveTo(arxy[0][0],arxy[0][1]);

ctx.lineTo(arxy[1][0],arxy[1][1]);

ctx.lineTo(arxy[2][0],arxy[2][1]);

ctx.lineTo(arxy[3][0],arxy[3][1]);

ctx.lineTo(arxy[4][0],arxy[4][1]);

ctx.lineTo(arxy[5][0],arxy[5][1]);

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

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

//ctx.closePath();

ctx.stroke();

return 0;

}

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.