Polygon and Canvas

by Benjamin DeLong

HTML

<canvas width="300" height="60"></canvas>

CSS

canvas {
    -webkit-clip-path: polygon(50% 33%, 75% 10%, 80% 80%, 60% 75%, 40% 60%, 20% 10%, 40% 20%, 50% 33%);   
}

JavaScript

var $canvas = document.getElementsByTagName('canvas');

var context = $canvas[0].getContext('2d');
context.fillStyle = 'red';
context.fillRect(10, 10, 300, 60);