<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400); //Nossa tela cinza de 600 x 400 pixels
function desenhaCoracao(x, y, raio) {
var dist = (0.8*raio); //dist = distância entre centros dos círculos
var h=2.5*raio;
pincel.fillStyle = 'red';
pincel.beginPath();
//Bolinha esquerda
pincel.arc(x-dist, y, raio, 0, 2 * Math.PI);
pincel.fill();
//Bolinha direita
pincel.arc(x+dist, y, raio, 0, 2 * Math.PI);
pincel.fill();
//Triangulo inferior esquerdo
pincel.moveTo(x,y);
pincel.lineTo(x, y+2.3*raio);
pincel.lineTo(x-1.45*raio, y+0.8*raio);
pincel.fill();
//Triangulo inferior direito
pincel.moveTo(x,y);
pincel.lineTo(x, y+2.3*raio);
pincel.lineTo(x+1.45*raio, y+0.8*raio);
pincel.fill();
}
function limpaTela() {pincel.clearRect(0, 0, 600, 400);}
var x = 20; var vai=true; var xx = 0; var yy = 0; var angX=0;var angY=0 ; var k = 90;
function atualizaTela() {
limpaTela();
angX = angX+0.06; //Incrementa âmgulo em radianos
angY = angY+0.05; //Incrementa âmgulo em radianos, se o incremento for igual, o mov é circular
if (angX>=2*Math.PI) {angX=0} //Se o ângulo ANGx for >= 360 graus, volta a 0 grau
if (angY>=2*Math.PI) {angY=0} //Se o ângulo ANGy for >= 360 graus, volta a 0 grau
xx = Math.sin(angX)*k; //Cria uma variável senoidal adicional para somar ao centro X do coração
yy = Math.cos(angY)*k;//Cria uma variável cosenoidal adicional para somar ao centro Y do coração
//Chamada da funcao Coracao
desenhaCoracao(300+xx, 200+yy, x);
if (vai==true) { x++; } //incrementa o raio
if (x>=30) {(vai=false);}
if (vai==false) { (x=x-1);} //decrementa o raio
if (x<=20) {vai=true;}
}
setInterval(atualizaTela, 20); //Temporizador com 20 milissegundos
</script>