Tile Munch at native res to fill screen.

[Hacks.git] / hacks / Munch / Munch.js

diff --git a/hacks/Munch/Munch.js b/hacks/Munch/Munch.js
index 2acc90a..333237b 100644 (file)
--- a/hacks/Munch/Munch.js
+++ b/hacks/Munch/Munch.js
@@ -3,38 +3,52 @@
 enyo.kind({
        name: 'Munch',
        kind: 'Hack',
-       pack: "center",
-       align: "center",
        style: "background-color: black",
        components: [
-               {kind: enyo.Control, nodeTag: "canvas", name: "display", width: "512px", height: "512px"}
+               {name: "display", nodeTag: "canvas"}
        ],
 
        t: 0,
        timer: null,
 
        rendered: function() {
-               var node = this.$.display.hasNode();
-               node.width = 256;
-               node.height = 256;
-               this.ctx = node.getContext('2d');
-               this.ctx.fillStyle = 'black';
-               this.ctx.fillRect(0, 0, 255, 255);
-               this.ctx.fillStyle = 'rgba(0,0,0,0.075)';
-               this.ctx.strokeStyle = '#00FF00';
+               this.display = this.$.display.hasNode();
+               this.ctx = this.display.getContext('2d');
+
+               this.intermediate = document.createElement('canvas');
+               this.intermediate.width = 512;
+               this.intermediate.height = 512;
+               this.ictx = this.intermediate.getContext('2d');
+               this.ictx.fillStyle = 'black';
+               this.ictx.fillRect(0, 0, 255, 255);
+               this.ictx.fillStyle = 'rgba(0,0,0,0.075)';
+               this.ictx.strokeStyle = '#00FF00';
+
+               this.resize(window.innerWidth, window.innerHeight);
                this.draw();
        },
 
+       resize: function(w, h) {
+               this.display.width = this.w = w;
+               this.display.height = this.h = h;
+       },
+
        draw: function() {
-               this.ctx.fillRect(0, 0, 256, 256);
-               this.ctx.beginPath();
-               for (var x = 0; x < 256; x++) {
+               this.ictx.fillRect(0, 0, 512, 512);
+               this.ictx.beginPath();
+               for (var x = 0; x < 512; x++) {
                        var y = x ^ this.t;
-                       this.ctx.moveTo(x, y);
-                       this.ctx.lineTo(x+1, y+1);
+                       this.ictx.moveTo(x, y);
+                       this.ictx.lineTo(x+1, y+1);
+               }
+               this.ictx.stroke();
+               this.t = (this.t + 1) % 512;
+
+               for (var x = 0; x < this.w; x += 512) {
+                       for (var y = 0; y < this.h; y += 512) {
+                               this.ctx.drawImage(this.intermediate, 0, 0, 512, 512, x, y, 512, 512);
+                       }
                }
-               this.ctx.stroke();
-               this.t = (this.t + 1) % 255;
        },
 
        start: function() {