Canvas: Deutschland Flagge

Glückwunsch an unsere Nationalmannschaft zum Gewinn der WM 2014.

Damit der Browser auch komplett in den drei Farben glänzen kann, gibt es hier die entsprechende Seite dazu.

function mwFlagge() {
	var t = this;
	t.canvas = null;
	t.ctx = null;		//canvas context 
	t.y;

	t.run = function(){
		t.init();
	}

	t.init = function(){
		t.canvas = document.getElementById('main');
		t.calculate();
		t.ctx = t.canvas.getContext('2d');

		window.addEventListener("resize", function(e) {
			e.preventDefault();
			t.resize();
		}, false);

		draw();
	}

	t.calculate = function(){
		t.canvas.width = window.innerWidth;
		t.canvas.height = window.innerHeight;
		t.y = window.innerHeight / 3;		
	}

	t.resize = function() {
		t.calculate();
		draw();
	}

	function draw(){

		t.ctx.beginPath();
		t.ctx.fillStyle = "#000000";
		t.ctx.fillRect(0,0,window.innerWidth,t.y);

		t.ctx.fillStyle = "#DD0000";
		t.ctx.fillRect(0,t.y,window.innerWidth,t.y);

		t.ctx.fillStyle = "#FFCE00";
		t.ctx.fillRect(0,t.y*2,window.innerWidth,t.y*2);

		t.ctx.stroke();
	}
}

Hier gehts zur Live Demo.
Download: Flagge.zip