Testei fazer o código mostrado na aula com corações: Segue abaixo:
Testei fazer o código mostrado na aula com corações: Segue abaixo:
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "gray";
pincel.fillRect(0,0, 600, 400);
function exibeCoracao(evento) {
var x = evento.pageX - tela.offsetLeft; //Ajustar as coordenadas;
var y = evento.pageY - tela.offsetTop; //Ajustar as coordenadas;
pincel.fillStyle = 'red';
pincel.beginPath();
pincel.arc(x, y, 5, 0, 3.14*2);
pincel.arc(x+10, y, 5, 0, 3.14*2);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.moveTo(x+5, y+15);
pincel.lineTo(x-5, y);
pincel.lineTo(x+15, y);
pincel.fill();
}
tela.onclick = exibeCoracao;
</script>
Exemplo do resultado: