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() {