I am looking to create a unique and dynamic, animated background using either JavaScript or CSS for a non-rectangular shape in Canvas or SVG.
Check out this example animation: https://codepen.io/tmrDevelops/pen/NPMGjE
Here's the shape along with my ultimate goal in mind.
While on a standard web page a layered div or shape could be utilized, in this case, it needs to be displayed on a "Smart TV" within an l-band section where the white area must remain transparent for the RF video to display properly.
Whether working with a Canvas or SVG shape, I have experimented with clipping to layer and mask shapes but unfortunately haven't had success applying it directly to a class or id.
I've searched but haven't found any examples of this particular challenge being overcome.
Your assistance would be greatly appreciated!
Below is an example code snippet demonstrating basic clipping...
(function () {
canvas = document.getElementById('lband');
ctx = canvas.getContext("2d");
setCanvasSize();
draw();
})();
function setCanvasSize() {
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
W = canvas.width;
H = canvas.height;
Hl = canvas.height * .85;
Wl = canvas.width * .85;
draw();
}
function draw() {
ctx.save();
ctx.beginPath();
ctx.moveTo(0, Hl);
ctx.lineTo(Wl, Hl);
ctx.lineTo(Wl, 0);
ctx.lineTo(W, 0);
ctx.lineTo(W, H);
ctx.lineTo(0, H);
ctx.closePath();
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 640, 480);
ctx.restore();
}