JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<canvas id="test" width="500" height="500"></canvas>

CSS

#test{
    border:1px solid #ccc;
}

JavaScript

var c = document.getElementById('test').getContext('2d');
    var context = document.getElementById('test').getContext('2d');

function HeartShape(_x, _y, _r){
        var x = _x;
        var y = _y;
        var radius = _r;
        var endAngle = (Math.PI/180)*360;

        this.draw = function(canvas){
        
        canvas.moveTo(x,y);
        // begin custom shape
        canvas.beginPath();
    
        canvas.bezierCurveTo(x+75,y+37,x+70,y+25,x+50,y+25);
        canvas.bezierCurveTo(x+20,y+25,x+20,y+62.5,x+20,y+62.5);
        canvas.bezierCurveTo(x+20,y+80,x+40,y+102,x+75,y+120);
        canvas.bezierCurveTo(x+110,y+102,x+130,y+80,x+129,y+62.5);
        canvas.bezierCurveTo(x+130,y+62.5,x+130,y+24,x+100,y+25);
        canvas.bezierCurveTo(x+85,y+25,x+75,y+37,x+75,y+40);
      // complete custom shape
        canvas.closePath();
        canvas.lineWidth = 5;
        canvas.fillStyle = 'red';
        canvas.fill();
        canvas.strokeStyle = '#BF3030';
        canvas.stroke();
        };
        
        this.drawBig = function(canvas){
            canvas.fillStyle = "white";
            canvas.beginPath();
            canvas.arc(x+75,y+75,radius+15,0,endAngle ,true);
            canvas.fill();
        };
            
        return this;
    }
    
    function Heart(_canvas, x,y,radius,increase){
        var canvas = _canvas;
        var currentState = 0;
        var heartShape = new HeartShape(x,y,radius);
        
        var that = this;
        
        
        this.beat = function(delay){
            if (delay){
                setTimeout(function(){that.beat(0);}, delay);
            }
            else{
                if (currentState == 1){
                    heartShape.draw(canvas);
                    that.beat(1000);
                    currentState = 0;
                }
                else{
                    heartShape.drawBig(canvas);
                    currentState = 1;
                    setTimeout( function() {
                  ...