![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>