animateFireBlaze.js

function animateFireBlaze(x1, y1, x2, y2) {
  const canvas = document.createElement("canvas");
  canvas.width = x2 - x1;
  canvas.height = y2 - y1;
  document.body.appendChild(canvas);
  const ctx = canvas.getContext("2d");

  function drawFlame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const flameHeight = canvas.height / 2 + Math.random() * canvas.height / 4;
    const gradient = ctx.createLinearGradient(0, canvas.height, 0, 0);
    gradient.addColorStop(0, "yellow");
    gradient.addColorStop(1, "red");
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, canvas.height);
    ctx.lineTo(canvas.width / 4, flameHeight);
    ctx.lineTo(canvas.width * 3 / 4, flameHeight);
    ctx.closePath();
    ctx.fill();

    requestAnimationFrame(drawFlame);
  }

  drawFlame();
}
You can call this function with the coordinates of the two squares forming the border of the playing card, and it will create a canvas, draw the flame animation, and append the canvas to the body of the HTML document.




function animateFireBlaze(x1, y1, x2, y2) {
  const canvas = document.createElement("canvas");
  canvas.width = x2 - x1;
  canvas.height = y2 - y1;
  document.body.appendChild(canvas);
  const ctx = canvas.getContext("2d");

  function drawFlame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const flameHeight = canvas.height / 2 + Math.random() * canvas.height / 4;
    const gradient = ctx.createLinearGradient(0, canvas.height, 0, 0);
    gradient.addColorStop(0, "yellow");
    gradient.addColorStop(0.25, "orange");
    gradient.addColorStop(0.5, "red");
    gradient.addColorStop(0.75, "darkred");
    gradient.addColorStop(1, "black");
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, canvas.height);
    ctx.lineTo(canvas.width / 4, flameHeight);
    ctx.lineTo(canvas.width * 3 / 4, flameHeight);
    ctx.closePath();
    ctx.fill();

    requestAnimationFrame(drawFlame);
  }

  drawFlame();
}