<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1300" height="600"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ctx1 = canvas.getContext("2d");
var ctx2 = canvas.getContext("2d");
var ctx3 = canvas.getContext("2d");
//Right Side Of pyramid Paths.
var ctx4= canvas.getContext("2d");
var ctx5= canvas.getContext("2d");
var ctx6= canvas.getContext("2d");
var ctx7= canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
// var sWidth = canvas.width;
// var sHeight = canvas.height;
var path=new Path2D();
path.moveTo(250,100);
path.lineTo(300,250);
path.lineTo(200,250);
ctx.fillStyle = "#d62d20";
ctx.fill(path);
var path1=new Path2D();
path1.moveTo(200,250);
path1.lineTo(150,350);
path1.lineTo(350,350);
path1.lineTo(300,250);
ctx1.fillStyle = "#ffa700";
ctx1.fill(path1);
var path2=new Path2D();
path2.moveTo(150,350);
path2.lineTo(100,450);
path2.lineTo(400,450);
path2.lineTo(350,350);
ctx2.fillStyle = "#008744";
ctx2.fill(path2);
var path3=new Path2D();
path3.moveTo(100,450);//Upper Left
path3.lineTo(50,550);//Lower Left
path3.lineTo(450,550);//lower Right
path3.lineTo(400,450);//Upper Right
ctx3.fillStyle = "#0057e7";
ctx3.fill(path3);
// Right Side Of pyramid Paths.
var path4=new Path2D();
path4.moveTo(250,150);
path4.lineTo(250,250);
path4.lineTo(1200,250);
path4.lineTo(1200,150);
ctx4.fillStyle = "#d62d20";
ctx4.fill(path4);
// ctx4.shadowColor = "Black";
// ctx4.shadowOffsetX = 10;
// ctx4.shadowOffsetY = 10;
var path5=new Path2D();
path5.moveTo(250,260);
path5.lineTo(250,350);
path5.lineTo(1200,350);
path5.lineTo(1200,260);
ctx5.fillStyle = "#ffa700";
ctx5.fill(path5);
var path6=new Path2D();
path6.moveTo(250,360);
path6.lineTo(250,450);
path6.lineTo(1200,450);
path6.lineTo(1200,360);
ctx6.fillStyle = "#008744";
ctx6.fill(path6);
var path7=new Path2D();
path7.moveTo(250,460);
path7.lineTo(250,550);
path7.lineTo(1200,550);
path7.lineTo(1200,460);
ctx7.fillStyle = "#0057e7";
ctx.font = "30px Arial";
ctx7.fillText("",250,360);
ctx7.fill(path7);
// path7.addEventListener('click', function(event)
// {
// alert('hello world');
// });
canvas.addEventListener('click', function() {
alert('hello world');
}, false);
</script>
</body>
</html>
