html5 challenge,html - HTML5 canvas challenge! - Stack Overflow

q1: is it possible to have an invisible rectangle?

Indeed it is!

ctx.fillStyle = 'rgba(255,255,255,0)';

ctx.fillRect(50,50,50,20);

Though this also works, and is a bit more concise:

;

q2: is it possible to call method upon method?

Conceivably you could do something like this:

//Naive generic chainer function

//returns this even if the default

//value is significant!

function chain(obj) {

function F() {}

F.prototype = obj;

var cobj = new F();

for (var i in obj) {

if (typeof obj[i] == 'function') {

//Function Bind-ish

cobj[i] = (function() {

var method = i;

return function() {

this.constructor.prototype[method].apply(this, arguments);

return this;

};

}());

}

}

return cobj;

}

var chained = chain(ctx);

chained.fillRect(0,0,200,200)

.fillRect(100,100,200,200)

.fillRect(400,400,100,100)

.fillText("I CAN HAS INVISDIBLE??", 250, 250);

But why bother when you can do this:

with (ctx) {

fillRect(100,100,200,200);

fillRect(300,300,100,100);

fillStyle = 'green'; //I CAN SEE

fillText("SCREW BEST PRACTICES");

}