canvas masking

by Soviut

HTML

<canvas id="canvas" width="512" height="512"></canvas>

CSS

#canvas {
    width: 512px;
    height: 512px;
}

body {
    background: cornflowerblue;
}

JavaScript

var canvas = $('#canvas');
var ctx = canvas.get(0).getContext('2d');

var img = document.createElement('IMG');
img.onload = function() {
    ctx.save();
    ctx.miterLimit = 4;
    ctx.beginPath();
    ctx.moveTo(512,0);
    ctx.bezierCurveTo(512,0,256,0,256,236.795);
    ctx.bezierCurveTo(256,512,0,512,0,512);
    ctx.lineTo(512,512);
    ctx.lineTo(512,0);
    ctx.closePath();
    ctx.fill();
    //ctx.clip();
    ctx.globalCompositeOperation = 'source-in';
    ctx.drawImage(img, 0, 0);
    ctx.restore();
};

img.src = 'https://d3qcduphvv2yxi.cloudfront.net/assets/3789237/lightbox/512x512%20PNG%20Landscape%20Texture%20-%20Dandelion%20Field.jpg?1308962739';