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. 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});
  2. Mengapa Canvas tidak memiliki event listener per-objek seperti DOM biasa?
  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?