Задача: нарисовать домик, и присвоить различным его элементам действия по клику, например: По клику на надпись открыть модальное окно, по клику на дверь сделать её открытой и ид. Домик нарисовал, а как применить действие по клику на элемент не могу никак понять. Не прошу сделать за меня задание, хочу именно узнать, как реализовать здесь oneclick или что здесь правильнее использовать. <!doctype html><html> <head> <title>Домик</title> <meta charset='Windows-1251'> </head> <body> <canvas id='example'>Обновите браузер</canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.width = 1280; example.height = 720; <!-- Дом --> ctx.fillStyle = '#F0E68C'; ctx.fillRect(500, 350, 400, 350); <!-- Дверь --> ctx.fillStyle = '#79443B'; ctx.fillRect(775, 495, 90, 200); ctx.fillStyle = '#3D2B1F'; ctx.fillRect(845, 595, 8, 8); <!-- Крыша --> ctx.beginPath(); ctx.fill(); ctx.moveTo(500, 350); ctx.lineTo(700, 100); ctx.lineTo(900, 350); ctx.closePath(); ctx.fillStyle = '#CC4E5C'; ctx.fill(); <!-- Окно --> ctx.fillStyle = '#30D5C8'; ctx.fillRect(550, 400, 120, 120); <!-- Труба --> ctx.beginPath(); ctx.fill(); ctx.moveTo(820, 250); ctx.lineTo(820, 200); ctx.lineTo(865, 200); ctx.lineTo(865, 306); ctx.closePath(); ctx.fillStyle = '#C41E3A'; ctx.fill(); <!-- Надпись --> ctx.fillStyle = 'black'; ctx.font = 'italic 22.5pt Times New Roman'; ctx.fillText("Винни-Пух", 750, 480); </script> </body></html>
