![Animacao - botoes de play e pause][1] Fiz uma animacao e gostaria de colocar os botoes de pause e play usando esses desenhos em formas primitivas. function botaoPlay() { contexto.beginPath(); contexto.fillStyle = "rgb(255,255,0)"; contexto.moveTo(430, 450); contexto.lineTo(460, 465); contexto.lineTo(430, 480); contexto.lineTo(430, 450); contexto.fill(); contexto.closePath(); } function botaoStop() { contexto.beginPath(); contexto.fillStyle = "rgb(255,55,55)"; contexto.arc(490, 463, 15, 0, 2 * Math.PI, true); contexto.fill(); contexto.closePath } Como faco pra usar evento de click nas formas? [1]: https://i.sstatic.net/ZyOyi.png Aqui todo o codigo: <html> <head> <title>ANIMACAO - RequestAnimationFrame</title> </head> <body> <canvas id="meu_canvas" width="900" height="500"></canvas> <script> //canvas e contexto var canvas = document.getElementById('meu_canvas'); var contexto = canvas.getContext('2d'); var playpause; var x = 0; var desloc = 2; var LARGURA = 100; var ALTURA = 140; var frame = 1; var imagem = new Image(); imagem.src = "IMG/ScottSprite.png"; imagem.onload = function() { contexto.drawImage(imagem, 0, 0, LARGURA, ALTURA, x, 20, LARGURA, ALTURA); } //Caixa de botoes(Contem 3x funcoes: Desenhar uma caixa com DOIS botoes) boxButton(); window.requestAnimationFrame(playAnimation); //Função de animação function playAnimation() { contexto.clearRect(0, 0, canvas.width, 445); //Deslocar x = (x + LARGURA + desloc > canvas.width ? 0 : x + desloc); if (x % (LARGURA / 2) == 0) frame = (frame > 4 ? 2 : frame + 1); //Desenhar a imagem. desenharImagem(); //Chamando o cliclo novamente window.requestAnimationFrame(playAnimation); } function desenharImagem() { contexto.clearRect(0, 0, canvas.width, 445); contexto.setLineDash([4, 2]); contexto.strokeRect(0, 0, canvas.width, canvas.height); contexto.drawImage(imagem, frame * LARGURA, 0, LARGURA, ALTURA, x, canvas.height / 2, LARGURA, ALTURA); } function botaoPlay() { contexto.beginPath(); contexto.fillStyle = "rgb(255,255,0)"; contexto.moveTo(430, 450); contexto.lineTo(460, 465); contexto.lineTo(430, 480); contexto.lineTo(430, 450); contexto.fill(); contexto.closePath(); } function botaoStop() { contexto.beginPath(); contexto.fillStyle = "rgb(255,55,55)"; contexto.arc(490, 463, 15, 0, 2 * Math.PI, true); contexto.fill(); contexto.closePath } function boxButton() { contexto.beginPath(); contexto.fillStyle = "rgb(100,100,100)"; contexto.moveTo(410, 440); contexto.lineTo(520, 440); contexto.lineTo(520, 490); contexto.lineTo(410, 490); contexto.lineTo(410, 390); contexto.fill(); contexto.closePath(); botaoPlay(); botaoStop(); } //<button onclick="buttonPlay()">►</button> //<button onclick="buttonStop()">||</button> </script> </body> </html>