Clip-path css doens't render ?

Hi,

I’m using various image genretated by CSS with some clip path such as:

.rec.one{
position: absolute;
float:left;
    -webkit-clip-path: polygon(0 0, 27% 26%, 27% 100%, 0% 100%);
clip-path:  polygon(0 0, 27% 26%, 27% 100%, 0% 100%);
}

<div class="rec one">

                 <img src="pattern/purple.jpg" height="500">

            </div>

The problem I’m having is when i render the canvas as an img, it render the full image ( not masked anymore via the clip path)

Is there anyway to make this work by any chance ? It would be incredible !

Thanks a lot!

[AnthonyCrowcroft]

is this actually resolved or not sorry?

[Photix]

Use dom-to-image instead https://github.com/tsayen/dom-to-image

It allows save image from DOM elements with clip-path css property.