concave shape test

by Dean Panayotov

HTML

<canvas id="canvas" width="500" height="500">This browser doesn't support HTML5!</canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var CENTER_X = canvas.width / 2;
var CENTER_Y = canvas.height / 2;
var RADIUS = 100;

function draw() {
    var imageObj = new Image();
    imageObj.src = 'http://dailyappshow.s3.amazonaws.com/wp-content/uploads/2013/09/gradient-texture-iphone5s-wallpaper-square.jpg';
    context.drawImage(imageObj, 0, 0);
    context.beginPath();
    context.fillStyle = '#AA0099';
    context.beginPath();
    context.arc(CENTER_X, CENTER_Y, RADIUS, 0, 2 * Math.PI, false);
    context.fill();
    context.beginPath();
    context.globalCompositeOperation = 'destination-out';
    context.fillStyle = 'rgba(0,0,0,1.0)';
    context.arc(CENTER_X, CENTER_Y, RADIUS / 1.6, 0, 2 * Math.PI, false);
    context.fill();
    context.globalCompositeOperation = 'source-over';
}

draw();