HTML Canvas Fluid Lines

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"></script>
<body>
<canvas id="DemoCanvas" width="500" height="400"></canvas>
</body>

CSS

/* ==========================================================================
   Base
   ========================================================================== */

* {
	margin:0;
	padding:0;
}

body {
  padding-top:130px;
}

ul {
	list-style: none;
}

.landing-page {
	margin:0 auto;
	max-width: 90%;
	width:100%;
}

/* ==========================================================================
   Canvas Area
   ========================================================================== */

.canvas-container {
  /*background-color: #ccc;*/
  height:700px;
  position: relative;
  width:100%;
}


#line1 {
  display:block;
  width:100%;
}

.heading-story {
	width:100%;
}

/* ==========================================================================
   Canvas Area
   ========================================================================== */

.story {
	float:left;
	margin: 6em 0 0;
	position: absolute;
	width:100%;
}

.story--item1,
.story--item2,
.story--item3,
.story--item4 {
	display:inline-block;
	float:left;
	position: relative;
	width:100%;
}

.story--item1-heading,
.story--item3-heading {
	display: inline-block;
	float:left;
	margin: 40px 0 0 8px;
	position: relative;
}

.story--item1-circle,
.story--item2-circle,
.story--item3-circle,
.story--item4-circle {
	-webkit-border-radius:  60px;
  	-moz-border-radius:     60px;
  	border-radius:          60px;
  	display: inline-block;
  	height:120px;
  	position: relative;
  	width:120px;
}

			.story--item1 {
				/*left:2%;
				top: 160px;*/
			}

					.story--item1-circle {
					  background-color:#354F8E;
					  float:left;
					}


			.story--item3 {
				/*left:20%;
				top: 422px;*/
			}

					.story--item3-circle {
					  background-color:#BE3463;
					  float:left;
					}


.story--item2-heading,
.story--item4-heading {
	display: inline-block;
	float:right;
	margin: 40px 8px 0 0;
	position: relative;
}

			.story--item2 {
				/*right:2%;
				top: 160px;*/
			}

					.story--item2-circle {
					 ...

JavaScript

var canvas = document.getElementById('DemoCanvas');
 if (canvas.getContext) 
   {
    var ctx = canvas.getContext("2d");
      for (i = 0; i < 500; i += 10) 
      {
        ctx.moveTo(0, i);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(canvas.width, i);
        ctx.stroke();
        
      }
         for (i = 0; i <511; i += 10) 
      {
        ctx.moveTo(i, 0);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(i,canvas.height);
        ctx.stroke();
      }
     ctx.beginPath();
     ctx.moveTo(0, 300);
     ctx.strokeStyle = "red";
     ctx.bezierCurveTo(150, 0, 350, 0, 500, 300);
     ctx.stroke();
     ctx.beginPath();
     ctx.moveTo(0, 300);
     ctx.lineTo(150, 0);
     ctx.strokeStyle = "black";
     ctx.stroke();
     ctx.moveTo(500, 300);
     ctx.lineTo(350, 0);
     ctx.strokeStyle = "black";
     ctx.stroke();
     
     ctx.strokeText("( 0, 300 )", 0, 310);
     ctx.strokeText("( 150, 0 )", 150, 15);
     ctx.strokeText("( 350, 0 )", 360, 15);
     ctx.strokeText("( 500, 300 )", 440, 300);
     
     ctx.strokeStyle = "green";
     ctx.strokeText("( 0, 0 )", 10, 20);
     ctx.strokeText("( 0, 500 )", 450, 20);
     ctx.strokeText("( 0, 400)", 10, 390);
     ctx.strokeText("( 400, 500 )", 440, 390);

     }