From e2032ffe9e67095e04ad3d5b57c42e589ac8035d Mon Sep 17 00:00:00 2001
From: jwatson-CO-edu <43416880+jwatson-CO-edu@users.noreply.github.com>
Date: Mon, 18 Jan 2021 18:52:28 -0700
Subject: [PATCH 1/6] Update httpcanvas.go

---
 httpcanvas.go | 1 +
 1 file changed, 1 insertion(+)
diff --git a/httpcanvas.go b/httpcanvas.go
index 7d6699b..3b5ccf8 100644
--- a/httpcanvas.go
+++ b/httpcanvas.go
@@ -44,6 +44,7 @@ func (c *Canvas) renderHtml(w http.ResponseWriter, r *http.Request) error {
 <!-- http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/ -->
 <html>
   <head>
+    <link rel="icon" href="data:,"> <!-- https://stackoverflow.com/a/38917888 -->
     <script src="/jquery.js"></script>
     <style>
       body {

From 3b280bf028bc48c06a4eed6ef30ca48d93d55c0a Mon Sep 17 00:00:00 2001
From: jwatson-CO-edu <43416880+jwatson-CO-edu@users.noreply.github.com>
Date: Mon, 18 Jan 2021 19:08:09 -0700
Subject: [PATCH 2/6] Update README.md

Add `context.ShowFrame` to the README example so that it displays.
---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 7f2a82c..d3342e2 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,8 @@ func app(context *httpcanvas.Context) {
     context.LineWidth(5)
     context.StrokeStyle("#003300")
     context.Stroke()
+    
+    context.ShowFrame()
 }
 
 func main() {

From a38c7d153a748b5d8c41ead69fe1b05fc7ef81a9 Mon Sep 17 00:00:00 2001
From: jwatson-CO-edu <43416880+jwatson-CO-edu@users.noreply.github.com>
Date: Mon, 18 Jan 2021 19:13:12 -0700
Subject: [PATCH 3/6] Update circle.go

Show the frame
---
 examples/circle.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/examples/circle.go b/examples/circle.go
index 296a02b..f27dd6c 100644
--- a/examples/circle.go
+++ b/examples/circle.go
@@ -20,6 +20,8 @@ func app(context *httpcanvas.Context) {
 	context.LineWidth(5)
 	context.StrokeStyle("#003300")
 	context.Stroke()
+	
+	context.ShowFrame()
 }
 
 func main() {

From e1def677d86cbd25cbea2221c0557dd8e06b8e7d Mon Sep 17 00:00:00 2001
From: jwatson-CO-edu <43416880+jwatson-CO-edu@users.noreply.github.com>
Date: Mon, 18 Jan 2021 19:13:32 -0700
Subject: [PATCH 4/6] Update line.go

show the frame
---
 examples/line.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/examples/line.go b/examples/line.go
index 6b63560..2a306c9 100644
--- a/examples/line.go
+++ b/examples/line.go
@@ -16,6 +16,8 @@ func app(context *httpcanvas.Context) {
 	context.MoveTo(200, 50)
 	context.LineTo(50, 200)
 	context.Stroke()
+	
+	context.ShowFrame()
 }
 
 func main() {

From 8b1523f523b20f75ec3834420bb377f3cf2a8d7b Mon Sep 17 00:00:00 2001
From: jwatson-CO-edu <43416880+jwatson-CO-edu@users.noreply.github.com>
Date: Mon, 18 Jan 2021 19:14:11 -0700
Subject: [PATCH 5/6] Update lines.go

show the frame
---
 examples/lines.go | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/examples/lines.go b/examples/lines.go
index fb5d410..70df205 100644
--- a/examples/lines.go
+++ b/examples/lines.go
@@ -13,6 +13,8 @@ func app(context *httpcanvas.Context) {
 		context.Stroke()
 
 		time.Sleep(1 * time.Second)
+		
+		context.ShowFrame()
 	}
 }
 

From 90b42c1f19ed06f7c1221c82df7b6d5dbf8d3bb3 Mon Sep 17 00:00:00 2001
From: jwatson-CO-edu <james.watson-2@colorado.edu>
Date: Wed, 20 Jan 2021 15:41:05 -0700
Subject: [PATCH 6/6] Moved the template HTML to its own file for clarity

---
 .gitignore              |   1 +
 httpcanvas.go           | 165 ++--------------------------------------
 resource/container.html | 155 +++++++++++++++++++++++++++++++++++++
 3 files changed, 164 insertions(+), 157 deletions(-)
 create mode 100644 resource/container.html

diff --git a/.gitignore b/.gitignore
index 0026861..3c31f54 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,4 @@ _cgo_export.*
 _testmain.go
 
 *.exe
+.vscode
diff --git a/httpcanvas.go b/httpcanvas.go
index 3b5ccf8..ce55fe2 100644
--- a/httpcanvas.go
+++ b/httpcanvas.go
@@ -8,7 +8,8 @@ import (
 	"net/http"
 	"net/url"
 	"strings"
-	"strconv"
+  "strconv"
+  "io/ioutil"
 )
 
 type mouseMovement struct {
@@ -40,162 +41,12 @@ func (c *Canvas) updateUnique() {
 }
 
 func (c *Canvas) renderHtml(w http.ResponseWriter, r *http.Request) error {
-	container := `<!DOCTYPE HTML>
-<!-- http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/ -->
-<html>
-  <head>
-    <link rel="icon" href="data:,"> <!-- https://stackoverflow.com/a/38917888 -->
-    <script src="/jquery.js"></script>
-    <style>
-      body {
-        margin: 0px;
-        padding: 0px;
-      }
-      canvas {
-        border: 1px dashed rgb(170, 170, 170);
-        position:absolute; top:100px; left:100px;
-        visibility: hidden;
-      }
-    </style>
-  </head>
-  <body>
-    <canvas width="{{.Width}}" height="{{.Height}}"></canvas>
-    <canvas width="{{.Width}}" height="{{.Height}}"></canvas>
-    <script>
-      var currentData = []
-      var canvases = document.getElementsByTagName('canvas');
-      var contexts = []
-      contexts[0] = canvases[0].getContext('2d');
-      contexts[1] = canvases[1].getContext('2d');
-      var context = contexts[0]
-      var bufferIndex = 0
-
-      var intervalId = 0
-
-      function getMoreCommands() {
-        if (currentData.length == 0) {
-          $.ajaxSetup({async: false});
-          try {
-            $.get("/command", {id:"{{.Unique}}"}, function(data) {
-              currentData = data.split("~");
-            })
-            .fail(function() {
-              currentData = ["END"]
-            });
-          } catch(e) {
-            currentData = ["END"]
-          }
-        }
-      }
-
-      var nextMouseMoveEvent = 0
-      function postMouseEvent(cmdName, e) {
-        if (e.offsetX == undefined) {
-          x = e.originalEvent.layerX;
-          y = e.originalEvent.layerY;
-        } else {
-          x = e.offsetX;
-          y = e.offsetY;
-        }
-        if (x == undefined || y == undefined) {
-          return;
-        }
-
-        if (cmdName == "MOUSEMOVE") {
-          var now = new Date().getTime();
-          if (now < nextMouseMoveEvent) {
-            return;
-          }
-          nextMouseMoveEvent = now + 30; // throttle to 30ms
-        }
-
-        var cmd = cmdName + " " + x + " " + y
-        $.ajaxSetup({async: true});
-        $.post("/command", {id:"{{.Unique}}", cmd:cmd})
-      }
-
-      function parseBool(b) {
-        return b == "true"
-      }
-
-      function drawFrame() {
-        getMoreCommands()
-        while (currentData.length > 0) {
-          var commandString = currentData.shift()
-          var command = commandString.split("|");
-          if (command[0] == "END") {
-            clearInterval(intervalId)
-          } else if (command[0] == "CLEARFRAME") {
-            contexts[bufferIndex].clearRect(
-                0, 0, canvases[bufferIndex].width,
-                canvases[bufferIndex].height);
-          } else if (command[0] == "SHOWFRAME") {
-            canvases[bufferIndex].style.visibility='visible';
-            canvases[1-bufferIndex].style.visibility='hidden';
-            bufferIndex = 1 - bufferIndex
-            context = contexts[bufferIndex]
-            break;
-          } else if (command[0] == "beginPath") {
-            context.beginPath();
-          } else if (command[0] == "moveTo") {
-            context.moveTo(parseFloat(command[1]), parseFloat(command[2]));
-          } else if (command[0] == "lineTo") {
-            context.lineTo(parseFloat(command[1]), parseFloat(command[2]));
-          } else if (command[0] == "stroke") {
-            context.stroke();
-          } else if (command[0] == "arc") {
-            context.arc(parseFloat(command[1]),
-              parseFloat(command[2]),
-              parseFloat(command[3]),
-              parseFloat(command[4]),
-              parseFloat(command[5]),
-              parseBool(command[6]));
-          } else if (command[0] == "fillStyle") {
-              context.fillStyle = command[1]
-          } else if (command[0] == "fill") {
-              context.fill()
-          } else if (command[0] == "lineWidth") {
-              context.lineWidth = parseFloat(command[1])
-          } else if (command[0] == "strokeStyle") {
-              context.strokeStyle = command[1]
-          } else if (command[0] == "fillRect") {
-              context.fillRect(parseFloat(command[1]),
-                parseFloat(command[2]),
-                parseFloat(command[3]),
-                parseFloat(command[4]))
-          } else if (command[0] == "strokeRect") {
-              context.strokeRect(parseFloat(command[1]),
-                parseFloat(command[2]),
-                parseFloat(command[3]),
-                parseFloat(command[4]))
-          } else if (command[0] == "clearRect") {
-              context.clearRect(parseFloat(command[1]),
-                parseFloat(command[2]),
-                parseFloat(command[3]),
-                parseFloat(command[4]))
-          }
-        }
-      }
-
-      $(canvases[0]).click(function(e) {
-        postMouseEvent("MOUSECLICK", e);
-      });
-	  $(canvases[0]).mousemove(function(e) {
-        postMouseEvent("MOUSEMOVE", e);
-      });
-
-      $(canvases[1]).click(function(e) {
-        postMouseEvent("MOUSECLICK", e);
-      });
-      $(canvases[1]).mousemove(function(e) {
-        postMouseEvent("MOUSEMOVE", e);
-      });
-
-      intervalId = setInterval("drawFrame()", 30)
-    </script>
-  </body>
-</html>`
-	template, err := template.New("basic").Parse(container)
+  data, err := ioutil.ReadFile("resource/container.html")
+  container := string( data )
+  if err != nil {
+		return err
+	}
+	template,  err := template.New("basic").Parse(container)
 	if err != nil {
 		return err
 	}
diff --git a/resource/container.html b/resource/container.html
new file mode 100644
index 0000000..2057688
--- /dev/null
+++ b/resource/container.html
@@ -0,0 +1,155 @@
+<!DOCTYPE HTML>
+<!-- http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/ -->
+<html>
+  <head>
+    <link rel="icon" href="data:,"> <!-- https://stackoverflow.com/a/38917888 -->
+    <script src="/jquery.js"></script>
+    <style>
+      body {
+        margin: 0px;
+        padding: 0px;
+      }
+      canvas {
+        border: 1px dashed rgb(170, 170, 170);
+        position:absolute; top:100px; left:100px;
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas width="{{.Width}}" height="{{.Height}}"></canvas>
+    <canvas width="{{.Width}}" height="{{.Height}}"></canvas>
+    <script>
+      var currentData = []
+      var canvases = document.getElementsByTagName('canvas');
+      var contexts = []
+      contexts[0] = canvases[0].getContext('2d');
+      contexts[1] = canvases[1].getContext('2d');
+      var context = contexts[0]
+      var bufferIndex = 0
+
+      var intervalId = 0
+
+      function getMoreCommands() {
+        if (currentData.length == 0) {
+          $.ajaxSetup({async: false});
+          try {
+            $.get("/command", {id:"{{.Unique}}"}, function(data) {
+              currentData = data.split("~");
+            })
+            .fail(function() {
+              currentData = ["END"]
+            });
+          } catch(e) {
+            currentData = ["END"]
+          }
+        }
+      }
+
+      var nextMouseMoveEvent = 0
+      function postMouseEvent(cmdName, e) {
+        if (e.offsetX == undefined) {
+          x = e.originalEvent.layerX;
+          y = e.originalEvent.layerY;
+        } else {
+          x = e.offsetX;
+          y = e.offsetY;
+        }
+        if (x == undefined || y == undefined) {
+          return;
+        }
+
+        if (cmdName == "MOUSEMOVE") {
+          var now = new Date().getTime();
+          if (now < nextMouseMoveEvent) {
+            return;
+          }
+          nextMouseMoveEvent = now + 30; // throttle to 30ms
+        }
+
+        var cmd = cmdName + " " + x + " " + y
+        $.ajaxSetup({async: true});
+        $.post("/command", {id:"{{.Unique}}", cmd:cmd})
+      }
+
+      function parseBool(b) {
+        return b == "true"
+      }
+
+      function drawFrame() {
+        getMoreCommands()
+        while (currentData.length > 0) {
+          var commandString = currentData.shift()
+          var command = commandString.split("|");
+          if (command[0] == "END") {
+            clearInterval(intervalId)
+          } else if (command[0] == "CLEARFRAME") {
+            contexts[bufferIndex].clearRect(
+                0, 0, canvases[bufferIndex].width,
+                canvases[bufferIndex].height);
+          } else if (command[0] == "SHOWFRAME") {
+            canvases[bufferIndex].style.visibility='visible';
+            canvases[1-bufferIndex].style.visibility='hidden';
+            bufferIndex = 1 - bufferIndex
+            context = contexts[bufferIndex]
+            break;
+          } else if (command[0] == "beginPath") {
+            context.beginPath();
+          } else if (command[0] == "moveTo") {
+            context.moveTo(parseFloat(command[1]), parseFloat(command[2]));
+          } else if (command[0] == "lineTo") {
+            context.lineTo(parseFloat(command[1]), parseFloat(command[2]));
+          } else if (command[0] == "stroke") {
+            context.stroke();
+          } else if (command[0] == "arc") {
+            context.arc(parseFloat(command[1]),
+              parseFloat(command[2]),
+              parseFloat(command[3]),
+              parseFloat(command[4]),
+              parseFloat(command[5]),
+              parseBool(command[6]));
+          } else if (command[0] == "fillStyle") {
+              context.fillStyle = command[1]
+          } else if (command[0] == "fill") {
+              context.fill()
+          } else if (command[0] == "lineWidth") {
+              context.lineWidth = parseFloat(command[1])
+          } else if (command[0] == "strokeStyle") {
+              context.strokeStyle = command[1]
+          } else if (command[0] == "fillRect") {
+              context.fillRect(parseFloat(command[1]),
+                parseFloat(command[2]),
+                parseFloat(command[3]),
+                parseFloat(command[4]))
+          } else if (command[0] == "strokeRect") {
+              context.strokeRect(parseFloat(command[1]),
+                parseFloat(command[2]),
+                parseFloat(command[3]),
+                parseFloat(command[4]))
+          } else if (command[0] == "clearRect") {
+              context.clearRect(parseFloat(command[1]),
+                parseFloat(command[2]),
+                parseFloat(command[3]),
+                parseFloat(command[4]))
+          }
+        }
+      }
+
+      $(canvases[0]).click(function(e) {
+        postMouseEvent("MOUSECLICK", e);
+      });
+	  $(canvases[0]).mousemove(function(e) {
+        postMouseEvent("MOUSEMOVE", e);
+      });
+
+      $(canvases[1]).click(function(e) {
+        postMouseEvent("MOUSECLICK", e);
+      });
+      $(canvases[1]).mousemove(function(e) {
+        postMouseEvent("MOUSEMOVE", e);
+      });
+
+      intervalId = setInterval("drawFrame()", 30)
+    </script>
+  </body>
+</html>
\ No newline at end of file
