Using Javascript, I have to create shapes, like a circle, traingle, rectangle, a arc and have a picture in it as well. I have coded some of the code but for some reason it does not show all of it. The picture is how it looks like:

I am not sure how to do the arc one so I did the one in the middle, filled with red. How do I change the one in the middle to be an arc?

Also I have to create a triangle and add a picture in the code as well. How should I code that part?

The following is the code I have, I tried to code the triangle but no luck in working:

body {

margin: 0px;

padding: 0px;

}

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.arc(100,75,50,0,2*Math.PI);

ctx.stroke();

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.beginPath();

context.arc(288, 75, 70, 0, Math.PI, false);

context.closePath();

context.lineWidth = 5;

context.fillStyle = 'red';

context.fill();

context.strokeStyle = '#550000';

context.stroke();

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.rect(400,60,150,90);

ctx.stroke();

var context = canvas.getContext('2d');

var x = canvas.width / 2;

var y = canvas.height / 2;

var radius = 75;

var startAngle = 1.1 * Math.PI;

var endAngle = 1.9 * Math.PI;

var counterClockwise = false;

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 15;

// line color

context.strokeStyle = 'black';

context.stroke();

function draw()

{

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)

{

var context = myCanvas.getContext('2d');

context.beginPath();

context.moveTo(75,75);

context.lineTo(10,75);

context.lineTo(10,25);

context.fill();

}

}

How should I change the code so I can have it fully working?

Thank you