I have cnavas design which looks like girl body,when i click on any image like (fabric,blouse) then that image will fill on that design. if i click fabric then it fill on sleeve part of design,if i click blouse then it fill in body part.
for reference here is link
http://www.houseofblouse.com/design/u-neck-2[
^]
here is my design which is for girl body part
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="700" height="800"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(3, 20);
context.lineTo(10, 200);
context.stroke();
context.beginPath();
context.moveTo(155, 20);
context.lineTo(150, 200);
context.stroke();
context.beginPath();
context.moveTo(10, 200);
context.lineTo(150, 200);
context.stroke();
context.beginPath();
context.moveTo(3, 20);
context.lineTo(45, 20);
context.stroke();
context.beginPath();
context.moveTo(155, 20);
context.lineTo(110, 20);
context.stroke();
context.beginPath();
context.moveTo(45, 20);
context.bezierCurveTo(48, 80, 110, 80, 110, 19);
context.stroke();
</script>
</body>
</html>