render-to-existing canvas works

WooodHead · Mar 4, 2015 · 1c99939 · 1c99939
1 parent 6e48a2e
commit 1c99939
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/dist/test.html b/dist/test.html
@@ -4,9 +4,11 @@
   <script type="text/javascript" src="trianglify.min.js"></script>
 </head>
 <body>
+<canvas id="canvas" />
 <script>
 var pattern = Trianglify({x_colors: 'random', y_colors: 'match_x'});
-var canvas = document.body.appendChild(pattern.canvas());
+var canvas = document.getElementById('canvas');
+pattern.canvas(canvas);
 canvas.addEventListener('click', function() {
   window.open(pattern.png());
 });

diff --git a/dist/trianglify.min.js b/dist/trianglify.min.js
@@ -243,16 +243,16 @@ function Pattern(polys, opts) {
   }
 
   // Canvas rendering method
-  function render_canvas(ctx) {
-    var canvas;
+  function render_canvas(canvas) {
 
-    if (!ctx) {
+    if (!canvas) {
       canvas = doc.createElement('canvas');
-      canvas.setAttribute('width', opts.width);
-      canvas.setAttribute('height', opts.height);
-      ctx = canvas.getContext("2d");
     }
 
+    canvas.setAttribute('width', opts.width);
+    canvas.setAttribute('height', opts.height);
+    ctx = canvas.getContext("2d");
+
     polys.forEach(function(poly) {
       ctx.fillStyle = ctx.strokeStyle = poly[0];
       ctx.beginPath();
@@ -263,7 +263,7 @@ function Pattern(polys, opts) {
       ctx.stroke();
     });
 
-    if (canvas !== undefined) return canvas;
+    return canvas;
   }
 
   // PNG rendering method

diff --git a/lib/pattern.js b/lib/pattern.js
@@ -26,16 +26,16 @@ function Pattern(polys, opts) {
   }
 
   // Canvas rendering method
-  function render_canvas(ctx) {
-    var canvas;
+  function render_canvas(canvas) {
 
-    if (!ctx) {
+    if (!canvas) {
       canvas = doc.createElement('canvas');
-      canvas.setAttribute('width', opts.width);
-      canvas.setAttribute('height', opts.height);
-      ctx = canvas.getContext("2d");
     }
 
+    canvas.setAttribute('width', opts.width);
+    canvas.setAttribute('height', opts.height);
+    ctx = canvas.getContext("2d");
+
     polys.forEach(function(poly) {
       ctx.fillStyle = ctx.strokeStyle = poly[0];
       ctx.beginPath();
@@ -46,7 +46,7 @@ function Pattern(polys, opts) {
       ctx.stroke();
     });
 
-    if (canvas !== undefined) return canvas;
+    return canvas;
   }
 
   // PNG rendering method