Approaches For Setting An Animated Canvas As Background Clipped Text Of A Heading Tag?

I would like to clip an animated canvas as background to a

. The requirements are: Use an actual

tag instead of rendered heading in canvas. Use of images

Solution 1:

If it doesn't have to be a background-image, you could put the canvas element inside the h1 element, match the canvaswidth and height to that of the h1 element, give it a lower z-index than the text in the h1 element so that it appears to be behind the text, acting like a background.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

/*
  Set the dimensions of the canvas to 
  match the parent h1 element
----------------------------------------------------------*/setCanvasSize();

// (and for demonstrative purposes, scale on window resize)window.addEventListener('resize', setCanvasSize, false);

functionsetCanvasSize () {
  var _w = canvas.parentNode.clientWidth;
  var _h = canvas.parentNode.clientHeight;
  canvas.width = _w;
  canvas.height = _h;
  canvas.style.width = "'" + _w + "px'";
  canvas.style.height = "'" + _h + "px'";
}
/*--------------------------------------------------------*//*--------------------------------------------------------
  All this code below is just a ball animation borrowed from MDN
  to illustrate what I'm suggesting.
  
  Source: MDN 
  https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations 
*/var raf;
var running = false;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 1,
  radius: 50,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

functionclear() {
  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
}

functiondraw() {
  clear();
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;

  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}
   
if (!running) {
  raf = window.requestAnimationFrame(draw);
  running = true;
}

ball.draw();
/*--------------------------------------------------------*/

h1 {
  /* Important for positioning the span element */position: relative;
  
  /* Cosmetic/demonstrative */border: 2px solid red;
  height: 100%;
  text-align: center;
  color: red;
  font-size: 32px;
  font-family: Roboto,sans-serif;
  margin: 0 auto;
}

h1span { 
  /* Vertically and horizontally center the text */position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  
  /*
    Text will appear above canvas as long as its 
    z-index > canvas' z-index
  */z-index: 2;

}

h1canvas {
  /* this will make the canvas appear behind the text */position: relative;
  z-index: 1; 
}

<h1><span>Lorem Ipsum etc.</span><canvasid="canvas"></canvas></h1>

Just a thought anyway, maybe you can try it out and expand on the idea to suit your needs. I'm not 100% sure what you're working on so apologies if it's not helpful.