fabricjs - How can I draw text that looks embossed using Kinetic JS and canvas? -

update - here final jsfiddle working version using kinetic.

i'm trying show text 2 different shadows create "embossed" look. i'm using jsfiddle model of result i'd uses css.

here jsfiddle of i'm working on kinetic js.

var stage = new kinetic.stage({   container: 'stage-container',   width: 400,   height: 200 });  var layer = new kinetic.layer(); stage.add(layer);  var darkshadow = new kinetic.text({         text: 'hello',     x: 140,     y: 80,     fill: '#000000',     fontsize: 60,     opacity: 0.8,     filter: kinetic.filters.blur,     filterradius: 1 });                           layer.add(darkshadow);  var lightshadow = new kinetic.text({         text: 'hello',     x: 136,     y: 76,     fill: '#ffffff',     fontsize: 60,     opacity: 0.3,     filter: kinetic.filters.blur,     filterradius: 1 });                           layer.add(lightshadow);  var maintext = new kinetic.text({         text: 'hello',     x: 138,     y: 78,     fill: '#ffffff',     fontsize: 60,     opacity: 0.8 });                           layer.add(maintext);  layer.draw(); 

i drawing text 3 times , offsetting them each shadow , main text. issue main text needs have opacity bring forth background color. here few screenshots see i'm against.

just shadows...

with 3 text objects...

my next thought create clipping mask of main text subtract out of 2 shadows, draw main text opacity bring forth background color. i'm not sure how or if there's better way.

compositing

use "destination-out" remove pixels.

if knew how use kineticjs set layer composite operation last text layer "destination-out" , remove pixels.

but work sift documentation here same thing without frameworks.

// constants  const text = "compositing";  const blur = 2;  const highlight = "rgba(100,190,256,0.75)";  const shadow = "rgba(0,0,0,0.65)";  const font = "84px arial black";  const background = "linear-gradient(to right,  #1e5799 0%,#3096e5 100%)";  const border = "2px solid #6cf"    // create canvas add styles , put on page  const canvas = document.createelement("canvas");  const w = (canvas.width = innerwidth - 24) / 2;  // set size , 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 font , 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 = ctx.shadowoffsetx = blur;  ctx.filltext(text, w, h);    // draw highlight  ctx.fillstyle = ctx.shadowcolor = highlight;  ctx.shadowoffsety = ctx.shadowoffsetx = -blur;  ctx.filltext(text,  w, h);    // draw center text removes pixels  ctx.shadowcolor = "rgba(0,0,0,0.0)";               // turn off shadow  ctx.fillstyle = "black";  ctx.globalcompositeoperation = "destination-out"; // new pixels remove old pixels making them transparent  ctx.filltext(text,  w, h);  ctx.globalcompositeoperation = "source-over";     // restore default composite operation.