Как я могу нарисовать текст с помощью вогнутости

Question

Я сейчас играю с холстом и пытаюсь добиться текстового эффекта, подобного этому (черная размытая внутренняя тень / эффект с вогнутостью):

Но я не могу найти способ создания текста с вогнутостью. Интересно, возможно ли это еще? Цвет текста должен совпадать с фоновым изображением.

Должен иметься трехмерный эффект.

Он должен быть похож на этот.

Какможно нарисовать текст с тиснением, используя Kinetic JS и canvas? @ Blindman67

Вот пример кода из @ Blindman67, и я немного его изменил, но эффект внутренней тени выглядит не очень хорошо.

const text = "ABCDEFGHIJLMNOPQRSTUVW";
const blur = -5;
const highLight = "rgba(205,129,98,0.85)";
const shadow = "rgba(0,0,0,0.65)";
const font = "normal bold 70px sans-serif";
const background = "url('https://www.instyle.com.au/wp-content/uploads/2015/07/Elmobaltique_43003_1280x700-0.jpg')";

const canvas = document.createElement("canvas");
const w = (canvas.width = innerWidth - 24) / 2;  // set size and get centers
const h = (canvas.height = innerHeight - 24) / 2;
canvas.style.background = background;
//canvas.style.border = border;
const ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

// set up font and font rendering alignment
ctx.font = font;
ctx.textAlign = "center";
ctx.textBaseline = "middle";

    // draw dark shadow
    ctx.shadowBlur = blur; // shadow
    ctx.fillStyle = ctx.shadowColor = shadow;
    ctx.shadowOffsetY =  blur;
    ctx.shadowOffsetX = blur;
    ctx.fillText(text, w, h);
    ctx.fillText(text, w, h + 0.5);
    ctx.fillText(text, w + 0.5, h);

    // draw highLight

    ctx.fillStyle = highLight;
    ctx.shadowColor = highLight;
    ctx.shadowOffsetY = 0;
    ctx.shadowOffsetX = 2;
    ctx.fillText(text,  w, h);
    ctx.fillText(text, w, h + 0.5);
    ctx.fillText(text, w + 0.5, h);


    // draw center text that removes pixels
    ctx.shadowColor = "rgba(0,0,0,0.0)";               // turn off shadow
    ctx.globalCompositeOperation = "destination-out"; // New pixels will remove old pixels making them transparent
    ctx.fillText(text,  w, h);
    ctx.fillText(text, w, h + 0.5);
    ctx.fillText(text, w + 0.5, h);
    ctx.globalCompositeOperation = "source-over";