Mask an image using image map or canvas?

Okay, my issue is better explained visually:

I need to make those 5 images easily replaceable wit开发者_开发知识库hout the client having to manually cut angles out of images, etc. So I'm picturing it this way:

I created PNG masks for the blue bar and blue space above them. But the images still overlap at the bottom because they are all square (see last image for an example). Is there any way, using an image map (or even javascript) to cut/mask pieces out of a square image on page load?

Thanks,

Chris

I think your best option would be to use canvas unless I'm forgetting something with css3

<canvas id="image1" width="___" height="____">
</canvas>

var people = [___];
var canvas = document.getElementById("image1");
var context = canvas.getContext("2d");
context.drawImage(people[0], x, y, width, height);
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y1);
context.arcTo(x, y);
context.clip();
context.closePath();

I may have messed up but I'm going for something like this

           (x, y)\__
          /         \__
         /             \__
(x2, y1)(_________________\(x1, y1)

Which is my best way of drawing the leftmost pizza slice with ascii

Doing this will require multiple canvas elements. where each one represents one slice. The reason is because clipping will erase everything but what's in the path.

Resources:

• MDN:clipping