html - JavaFX WebView doesn't display masked images in Sencha Touch app -

i working on javafx application uses javafx webview browser display sencha touch webapp. long story short, sencha touch application being accessed through different browser, in future needs accessed on device running javafx webview. makes things little convoluted, it's been pretty seamless transition.

the issue i'm having comes our use of -webkit-mask-image css property. using property color number of buttons , other images fit in whatever coloring scheme being used. unfortunately, javafx webview seems pretty confused -webkit-mask-image, , images being distorted.

i did homework , came this blog post describes how achieve effects similar -webkit-mask-image in other browsers, using svg's foreignobject.

as per article, added following html sencha touch application see how render in javafx webview:

<svg width="400px" height="300px">   <defs>     <mask id="mask" maskunits="userspaceonuse" maskcontentunits="userspaceonuse">       <image width="400px" height="300px" xlink:href="foo.png"></image>     </mask>   </defs>   <foreignobject width="400px" height="300px" style="mask: url(#mask);">     <div style="display:inline-block;background-color:blue;width:400px;height:300px">     </div>   </foreignobject> </svg> 

the masking image "foo.png" white image transparencies. when using -webkit-mask-image, mask image black, inverted per blog post's advice. worked beautifully in firefox, hoping news (because our image masking wasn't working in firefox). firefox displayed nice blue div masked "foo.png". long nightmare over!

except wasn't. in javafx webview, displays blue box. make sure had access "foo.png", tried regular old <img> tag, , displays image, that's not issue.

i did find this bug on openjdk, sounds pretty similar issue, although it's still listed "open" , didn't lead me far.

also, found this question in author trying similar. difference between , i'm trying that, in solution, wants display in image , mask/show parts of image. i'm trying have colored div, masked image transparencies. here's example:

.something-red {    background-color: red;    width: 400px;    height: 365px;    -webkit-mask-size: 400px;    -webkit-mask-image: url(http://i.imgur.com/cwscfgl.png);  }

<div class='something-red'>  </div>

my temporary solution has been replace our image masks static images have been pre-colored (by me). doesn't did when able mask images, , of course means i'd have create duplicate images different colors color scheme wanted use.

is there way achieve functionality -webkit-mask-image in javafx webview browser? thank taking time read question, i've provided enough information!

i found way simulate svg masking in javafx browser. instead of trying force support of -webkit-mask-image, found browser polyfill enable type of svg masking described in article referenced in question.

the modernizr polyfill collection includes myriad of javascript libraries meant add cross-browser support several features. after trying few of these, settled on canvg, translates svg definition canvas element, objects drawn on it. take @ example page see in action - lets edit svg input, can see if code works you.

so, implement solution, have 4 things. first, create canvas element wherever need image be. note should provide width , height, whatever size of image is.

<canvas id='foo'></canvas> 

next, grab reference canvas. used canvg library.

var canvas = document.getelementbyid('foo'); 

third, create svg. canvg supports few different formats, i'm providing xml string:

var svg =         '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewbox="0 0 100 100">' +             '<defs>'+               '<mask id="mask" maskunits="userspaceonuse">'+                 '<image width="100" height="100" xlink:href="foobar.png"></image>' +               '</mask>'+               '<rect id="rect" x="0" y="0" width="100" height="100" style="stroke-width:0px"/>'+             '</defs>'+             '<use xlink:href="#rect" mask="url(#mask)" fill="red"/>'+         '</svg>'; 

note doing similar svg masking article referenced in question, it's not same. defines mask, rectangle, masks rectangle.

the last thing call canvg so:

canvg(canvas, svg); 

this should enable image masking in javafx browser, since asked sencha touch, i'll mention how added sencha touch application.

after element rendered on screen, grab reference using ext's component query:

var component = ext.componentquery.query('#itemid');

next, generate canvas html element described above. then, following:

component.sethtml(yourcanvashtmlelement); 

now, component contains empty canvas element. that's element canvg using. make call canvg described above, , canvas element update.