var b = document.getElementById("myCanvas");
var c = b.getContext("2d");

// A Simple Filled Rectangle //
c.fillRect(50, 50, 25, 300);

// A Simple Filled Rectangle with Color //
c.fillStyle = "yellow";
c.fillRect(100, 50, 25, 300);

// A Simple Stroke Rectangle //
c.strokeRect(150, 50, 25, 300);

// A Simple Fill Rectangle with Color and Line Width // 
c.lineWidth = 5;
c.strokeStyle = "orange";
c.strokeRect(200, 50, 25, 300);

// A Simple Line //
// Lines 22 and 23 were only added because the width and style from Lines 15 and 16 would have been applied to all future paths. 
c.beginPath();
c.strokeStyle = "black";
c.lineWidth = 1;
c.moveTo(300, 50);
c.lineTo(300, 350);
c.stroke();

// A Simple Line with a greater Width //
c.beginPath();
c.lineWidth = 10;
c.moveTo(350, 50);
c.lineTo(350, 350);
c.stroke();

// A Simple Line with added color style //
// Notice that the width of the line below is the same width as the one before. Why? Because the line width is inherited.
c.beginPath();
c.strokeStyle = "orange";
c.moveTo(400, 50);
c.lineTo(400, 350);
c.stroke();

// A Simple Loop for Rectangles //
var push1 = 450;
var drop1 = 50;
for (var i = 0; i < 15; i = i + 1) {
c.lineWidth = 1;
c.strokeRect(push1, drop1, 50, 50);
push1 = push1 + 10;
drop1 = drop1 + 10;
}

// A Simple Loop for Lines //
var push2 = 450;
var drop2 = 300;
for (var i = 0; i < 10; i = i + 1) {
c.beginPath();
c.moveTo(push2, drop2);
c.lineTo(push2, 350);
c.stroke();
push2 = push2 + 10;
drop2 = drop2 - 10;
}