Question

How can i define special border (tops and bottom) for every image?. For example http://grab.by/csU6

If you check, the images has diagonals border on the top and bottom.

Thanks 🙂

Answer 1

The .clip function of canvas seems to fit the job just fine: http://jsfiddle.net/eGjak/333/.

ctx.moveTo(0, 100); // define path to draw in
ctx.lineTo(400, 0);
ctx.lineTo(400, 300);
ctx.lineTo(0, 400);
ctx.clip(); // constrain drawing to inside the path

var img = new Image;
img.onload = function() {
    ctx.drawImage(img, 0, 0);
};
img.src = "http://lorempixum.com/400/400/";​