NrupM · September 11, 2017 18:28 · Sep 11, 2017 · Sep 11, 2017 · Sep 11, 2017 · Sep 11, 2017
diff --git a/HTML5 canvas.md b/HTML5 canvas.md
@@ -10,7 +10,7 @@
       <script src="canvas.js"></script>
 
   ### The rendering context
-    The `<canvas>` element has a method called `.getContext()` used to access drawing functions
+   The `<canvas>` element has a method called `.getContext()` used to access drawing functions
 
         const canvas = document.querySelector('canvas');
         let c = canvas.getContext('2d');

diff --git a/HTML5 canvas.md b/HTML5 canvas.md
@@ -5,18 +5,17 @@
 ## Basic usage
 
   ### The `<canvas>` element
-      ```
+
       <canvas width='150' height='150'></canvas>
       <script src="canvas.js"></script>
-      ```
+
   ### The rendering context
     The `<canvas>` element has a method called `.getContext()` used to access drawing functions
-        ```
+        
         const canvas = document.querySelector('canvas');
         let c = canvas.getContext('2d');
         c.fillRect(10, 10, 100, 100);
         c.fillStyle = 'green';
-        ```
         
 ## Drawing Shapes <br> 
 The canvas has a default grid overlay, normally 1 unit in the grid cooresponds to 1 pixel on the canvas. <br> 
@@ -45,7 +44,7 @@ To make a shape using paths: <br>
 **Arcs/Cirlces** <br> 
 Use the `arc` method <br> 
 
-  `arc(x, y, radius, startAngle, endAnge, anticlosewise)`  <br> 
+  `arc(x, y, radius, startAngle, endAnge, anticlockwise)`  <br> 
     Draws an arc which is centered at `(x,Y)` with `radius` starting at `startAngle` and ending at `endAngle` going in the        given direction.  <br> 
 
 ## Applying styles and colors <br> 

diff --git a/HTML5 canvas.md b/HTML5 canvas.md
@@ -18,7 +18,7 @@
         c.fillStyle = 'green';
         ```
         
-## Drawing Shapes
+## Drawing Shapes <br> 
 The canvas has a default grid overlay, normally 1 unit in the grid cooresponds to 1 pixel on the canvas. <br> 
 The position of each drawn item will be translate it's (x, y) coordinates to different posoitions on the grid.  <br> 
 
@@ -34,15 +34,19 @@ To make a shape using paths: <br>
 2. Use drawing commands to draw into the path. 
 3. Close the path. 
 4. Stroke or fill the path to render it.  <br> 
+
   `c.beginPath()` initializes the path. <br>  
+
    `moveTo(x, y)` function to place the starting point. <br> 
+
    `lineTo(x, y)` draws a line from the current position to the specified x and y postion.  <br> 
       The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting         point for the following, etc.  <br> 
 
 **Arcs/Cirlces** <br> 
 Use the `arc` method <br> 
-`arc(x, y, radius, startAngle, endAnge, anticlosewise)`  <br> 
-  Draws an arc which is centered at `(x,Y)` with `radius` starting at `startAngle` and ending at `endAngle` going in the        given direction.  <br> 
+
+  `arc(x, y, radius, startAngle, endAnge, anticlosewise)`  <br> 
+    Draws an arc which is centered at `(x,Y)` with `radius` starting at `startAngle` and ending at `endAngle` going in the        given direction.  <br> 
 
 ## Applying styles and colors <br> 
 

diff --git a/HTML5 canvas.md b/HTML5 canvas.md
@@ -53,6 +53,6 @@ Use the `arc` method <br>
   Sets the style for shapes outlines <br> 
 
 ## Resources  <br> 
-https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
-https://codepen.io/pen/?editors=1010
+https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial <br> 
+https://codepen.io/pen/?editors=1010 <br> 
 https://codepen.io/NrupM/pen/QqLwMN
diff --git a/HTML5 canvas.md b/HTML5 canvas.md
@@ -20,36 +20,39 @@
         
 ## Drawing Shapes
 The canvas has a default grid overlay, normally 1 unit in the grid cooresponds to 1 pixel on the canvas. <br> 
-The position of each drawn item will be translate it's (x, y) coordinates to different posoitions on the grid. 
+The position of each drawn item will be translate it's (x, y) coordinates to different posoitions on the grid.  <br> 
 
-**Rectangles**
+**Rectangles** <br> 
 `fillRect(x, y, width, height`
-  Draws a filled rectangle. 
-Parameters `x` and `y` specify the position on the canvas, `width` and `height` provide the rectangle's size. 
+  Draws a filled rectangle.  <br> 
+Parameters `x` and `y` specify the position on the canvas, `width` and `height` provide the rectangle's size.  <br> 
 
-**Paths**
-A path is a list of points, connected by segments of lines that can be curved, and have different widths and colors.
-To make a shape using paths:
+**Paths** <br> 
+A path is a list of points, connected by segments of lines that can be curved, and have different widths and colors. <br> 
+To make a shape using paths: <br> 
 1. Create the path.
 2. Use drawing commands to draw into the path. 
 3. Close the path. 
-4. Stroke or fill the path to render it. 
-  `c.beginPath()` initializes the path.
-   `moveTo(x, y)` function to place the starting point.
-   `lineTo(x, y)` draws a line from the current position to the specified x and y postion. 
-      The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. 
-**Arcs/Cirlces**
-Use the `arc` method
-`arc(x, y, radius, startAngle, endAnge, anticlosewise)` 
-  Draws an arc which is centered at `(x,Y)` with `radius` starting at `startAngle` and ending at `endAngle` going in the given direction. 
+4. Stroke or fill the path to render it.  <br> 
+  `c.beginPath()` initializes the path. <br>  
+   `moveTo(x, y)` function to place the starting point. <br> 
+   `lineTo(x, y)` draws a line from the current position to the specified x and y postion.  <br> 
+      The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting         point for the following, etc.  <br> 
+
+**Arcs/Cirlces** <br> 
+Use the `arc` method <br> 
+`arc(x, y, radius, startAngle, endAnge, anticlosewise)`  <br> 
+  Draws an arc which is centered at `(x,Y)` with `radius` starting at `startAngle` and ending at `endAngle` going in the        given direction.  <br> 
 
-## Applying styles and colors
-`fillStyle = color`
-  Sets the style used when filling shapes
- `strokeStyle = color`
-  Sets the style for shapes outlines
+## Applying styles and colors <br> 
+
+`fillStyle = color` <br> 
+  Sets the style used when filling shapes <br> 
+
+ `strokeStyle = color` <br> 
+  Sets the style for shapes outlines <br> 
 
-## Resources
+## Resources  <br> 
 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
 https://codepen.io/pen/?editors=1010
 https://codepen.io/NrupM/pen/QqLwMN
diff --git a/HTML5 canvas.md b/HTML5 canvas.md
@@ -4,22 +4,20 @@
 
 ## Basic usage
 
-### The `<canvas>` element
-**HTML**
-```
-<canvas width='150' height='150'></canvas>
-<script src="canvas.js"></script>
-```
-### The rendering context
-The `<canvas>` element has a method called `.getContext()` used to access drawing functions
-**JavaScript**
-```
-const canvas = document.querySelector('canvas');
-let c = canvas.getContext('2d');
-c.fillRect(10, 10, 100, 100);
-c.fillStyle = 'green';
-```
-
+  ### The `<canvas>` element
+      ```
+      <canvas width='150' height='150'></canvas>
+      <script src="canvas.js"></script>
+      ```
+  ### The rendering context
+    The `<canvas>` element has a method called `.getContext()` used to access drawing functions
+        ```
+        const canvas = document.querySelector('canvas');
+        let c = canvas.getContext('2d');
+        c.fillRect(10, 10, 100, 100);
+        c.fillStyle = 'green';
+        ```
+        
 ## Drawing Shapes
 The canvas has a default grid overlay, normally 1 unit in the grid cooresponds to 1 pixel on the canvas. <br> 
 The position of each drawn item will be translate it's (x, y) coordinates to different posoitions on the grid. 

diff --git a/HTML5 canvas.md b/HTML5 canvas.md
@@ -0,0 +1,57 @@
+# `<canvas>` is an HTML element used to draw graphics using scripts (usuallt JavaScript)
+  The HTML `<canvas>` element is only a container for graphics.
+  Canvas has several methods for drawing paths, boxes, circles, text and for adding images. 
+
+## Basic usage
+
+### The `<canvas>` element
+**HTML**
+```
+<canvas width='150' height='150'></canvas>
+<script src="canvas.js"></script>
+```
+### The rendering context
+The `<canvas>` element has a method called `.getContext()` used to access drawing functions
+**JavaScript**
+```
+const canvas = document.querySelector('canvas');
+let c = canvas.getContext('2d');
+c.fillRect(10, 10, 100, 100);
+c.fillStyle = 'green';
+```
+
+## Drawing Shapes
+The canvas has a default grid overlay, normally 1 unit in the grid cooresponds to 1 pixel on the canvas. <br> 
+The position of each drawn item will be translate it's (x, y) coordinates to different posoitions on the grid. 
+
+**Rectangles**
+`fillRect(x, y, width, height`
+  Draws a filled rectangle. 
+Parameters `x` and `y` specify the position on the canvas, `width` and `height` provide the rectangle's size. 
+
+**Paths**
+A path is a list of points, connected by segments of lines that can be curved, and have different widths and colors.
+To make a shape using paths:
+1. Create the path.
+2. Use drawing commands to draw into the path. 
+3. Close the path. 
+4. Stroke or fill the path to render it. 
+  `c.beginPath()` initializes the path.
+   `moveTo(x, y)` function to place the starting point.
+   `lineTo(x, y)` draws a line from the current position to the specified x and y postion. 
+      The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. 
+**Arcs/Cirlces**
+Use the `arc` method
+`arc(x, y, radius, startAngle, endAnge, anticlosewise)` 
+  Draws an arc which is centered at `(x,Y)` with `radius` starting at `startAngle` and ending at `endAngle` going in the given direction. 
+
+## Applying styles and colors
+`fillStyle = color`
+  Sets the style used when filling shapes
+ `strokeStyle = color`
+  Sets the style for shapes outlines
+
+## Resources
+https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
+https://codepen.io/pen/?editors=1010
+https://codepen.io/NrupM/pen/QqLwMN