Kuis Canvas Interaktif — Creative Web

Kuis materi Canvas Interaktif di Creative Web — uji pemahamanmu dengan pertanyaan pilihan ganda, penjelasan jawaban, dan skor langsung. Main gratis di Hyper Sheets.

Pertanyaan di kuis ini

  1. Mengapa Canvas tidak memiliki event listener per-objek seperti DOM biasa?
  2. Untuk mendeteksi klik pada objek yang digambar di canvas, kita perlu menghitung posisi mouse relatif terhadap canvas. Lengkapi kode berikut:
    canvas.addEventListener("click", (e) => {\n  const rect = canvas.getBoundingClientRect();\n  const x = e.clientX - ___;\n  const y = e.clientY - rect.top;\n});
  3. canvas.addEventListener("mousemove", (e) => {\n  const rect = canvas.getBoundingClientRect();\n  const mx = e.clientX - rect.left;\n  const my = e.clientY - rect.top;\n  const dx = mx - 200;\n  const dy = my - 200;\n  if (Math.sqrt(dx*dx + dy*dy) < 50) {\n    canvas.style.cursor = "pointer";\n  } else {\n    canvas.style.cursor = "default";\n  }\n});
    Apa yang dilakukan kode ini?