Polygon test

by will

HTML

<div id="canvas"></div>

SCSS

#canvas {
    
}

JavaScript

/* create and svg canvas */
var draw = SVG('canvas');

var image = draw.image('http://www.sxc.hu/assets/182984/1829832845/green-wooden-texture-1175322-m.jpg', 300, 200).move(50, 50);

var shadow = draw
                .polygon('50,60 300,50 280,200 54,195')
                .fill({color: 'rgba(0,0,0,.2)'})
                .move(48, 55)
                .back();

var polygon = draw
                .polygon('50,60 300,50 280,200 54,195');

/* draw image */
image.maskWith(polygon.fill({color: '#FFF'}));