Ads for Krist in HTML5 (using canvas) Info TBA

KristAds.js

/* KristAds for HTML5 | Version 0.1 | by timia2109 */
function Pixel(text, tc, bc, sizeO) {
				this.ttx = text;
			    this.tc = "#"+tc;
			    this.bc = "#"+bc;
			    this.size = sizeO;
			}

			Pixel.prototype.draw = function(canvas, x,y) {
				canvas.fillStyle = this.bc;
			    canvas.fillRect(x, y, this.size.size, this.size.size);
			    canvas.fillStyle = this.tc;
			    canvas.font = this.size.font;
			    canvas.fillText(this.ttx,x+this.size.ttxX, y+this.size.ttxY);
			}

			Pixel.setSize = function(size) {
				var r = {};
				r.size = size;
				r.ttxX = Math.floor(0.2*size);
				r.ttxY = Math.floor(0.8*size);
				r.font = Math.floor(size*0.9)+"px Arial";
				return r;
			}

			function KristAd($canvas) {
				this.$canvas = $canvas;
				this.canvas = $canvas[0].getContext("2d");
				this.pixels = [];
				this.width = 0;
				this.height = 0;
				this.size = Pixel.setSize(1);
			}

			KristAd.prototype.load = function(code) {
				this.pixels = [];
				var lines = code.split("\n");
				var tcl = "FFFFFF";
				var bcl = "000000";
				for (var i=0;i<lines.length;i++) {
					var line = lines[i];
					var args = line.split(" ");
					if (args.length == 0) 
						break;
					switch (args[0]) {
						case "x":
							this.width = parseInt(args[1]);
							this.resize();
							break;
						case "y":
							this.height = parseInt(args[1]);
							this.resize();
							break;
						case "tc":
							tcl=args[1];
							break;
						case "bc":
							bcl=args[1];
							break;
						default:
							if (args[0].charAt(0) == "l") {
								this.lineFromString(line.substring(args[0].length+1), parseInt(args[0].substring(1))-1, tcl, bcl);
							}
							break;
					}
				}
			}

			KristAd.prototype.lineFromString = function(text, line, tc, bc) {
				var len = ((line+1)*this.width);
				var j=0;
				var tlen=text.length;
				for (var i=line*this.width; i<len; i++) {
					this.pixels[i] = new Pixel("", tc, bc, this.size);
					if (j<tlen)
						this.pixels[i].ttx = text.charAt(j);
					j++;
				}
			}

			KristAd.prototype.resize = function() {
				if (this.width > this.height)
					this.size = Pixel.setSize(Math.floor(this.$canvas.width()/this.width));
				else
					this.size = Pixel.setSize(Math.floor(this.$canvas.height()/this.height));
			}

			KristAd.prototype.draw = function() {
				var id=0, x=0, y=0;
				for (var i=0; i<this.height; i++) {
					for (var j=0; j<this.width; j++) {
						if (this.pixels[id] != null)
							this.pixels[id].draw(this.canvas, x, y);
						id++;
						x+=this.size.size;
					}
					y+=this.size.size;
					x=0;
				}
			}

			KristAd.prototype.shrink = function() {
				this.$canvas.attr("width", this.width*this.size.size);
				this.$canvas.attr("height", this.height*this.size.size);
				this.draw();
			}

KristAds.min.js

/* KristAds for HTML5 | Version 0.1 | by timia2109 */
function Pixel(t,i,s,h){this.ttx=t,this.tc="#"+i,this.bc="#"+s,this.size=h}function KristAd(t){this.$canvas=t,this.canvas=t[0].getContext("2d"),this.pixels=[],this.width=0,this.height=0,this.size=Pixel.setSize(1)}Pixel.prototype.draw=function(t,i,s){t.fillStyle=this.bc,t.fillRect(i,s,this.size.size,this.size.size),t.fillStyle=this.tc,t.font=this.size.font,t.fillText(this.ttx,i+this.size.ttxX,s+this.size.ttxY)},Pixel.setSize=function(t){var i={};return i.size=t,i.ttxX=Math.floor(.2*t),i.ttxY=Math.floor(.8*t),i.font=Math.floor(.9*t)+"px Arial",i},KristAd.prototype.load=function(t){this.pixels=[];for(var i=t.split("\n"),s="FFFFFF",h="000000",e=0;e<i.length;e++){var r=i[e],a=r.split(" ");if(0==a.length)break;switch(a[0]){case"x":this.width=parseInt(a[1]),this.resize();break;case"y":this.height=parseInt(a[1]),this.resize();break;case"tc":s=a[1];break;case"bc":h=a[1];break;default:"l"==a[0].charAt(0)&&this.lineFromString(r.substring(a[0].length+1),parseInt(a[0].substring(1))-1,s,h)}}},KristAd.prototype.lineFromString=function(t,i,s,h){for(var e=(i+1)*this.width,r=0,a=t.length,n=i*this.width;e>n;n++)this.pixels[n]=new Pixel("",s,h,this.size),a>r&&(this.pixels[n].ttx=t.charAt(r)),r++},KristAd.prototype.resize=function(){this.width>this.height?this.size=Pixel.setSize(Math.floor(this.$canvas.width()/this.width)):this.size=Pixel.setSize(Math.floor(this.$canvas.height()/this.height))},KristAd.prototype.draw=function(){for(var t=0,i=0,s=0,h=0;h<this.height;h++){for(var e=0;e<this.width;e++)null!=this.pixels[t]&&this.pixels[t].draw(this.canvas,i,s),t++,i+=this.size.size;s+=this.size.size,i=0}},KristAd.prototype.shrink=function(){this.$canvas.attr("width",this.width*this.size.size),this.$canvas.attr("height",this.height*this.size.size),this.draw()};

test.html

<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Tims Mobile Tests</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<style type="text/css">#adc {
            height: 300px;
            width: auto;
        }</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="col-md-6">
			<div id="adc">x 34
y 8
tc 000000
bc FFFFFF
l1 Hey this is an Ad
l2 Ads are new at this version
l3 It should help to explore 
l4 		new cool Krist Things
tc 00FF00
l5 And support the developing 
l6     of the app
tc FFFFFF
bc 00FF00
l7 Click here to get more infos about 
tc 000000
bc FFFFFF
l8 Krist_Ads</div>
			<button class="btn btn-default" onclick="refreshAd()">Refresh Ad</button>
			<button class="btn btn-default" id="shrinkBtn">Shrink Ad</button>
			<div class="well"></div>
			</div>
			<div class="col-md-6" id="colCanv">
				<canvas width="500" height="500" id="kstAd" style="border:1px solid gray;"></canvas>
			</div>
		</div>
		

		<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
		<script src="//timia2109.com/kst/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var editor = ace.edit("adc");
            editor.setTheme("ace/theme/monokai");

			function Pixel(text, tc, bc, sizeO) {
				this.ttx = text;
			    this.tc = "#"+tc;
			    this.bc = "#"+bc;
			    this.size = sizeO;
			}

			Pixel.prototype.draw = function(canvas, x,y) {
				canvas.fillStyle = this.bc;
			    canvas.fillRect(x, y, this.size.size, this.size.size);
			    canvas.fillStyle = this.tc;
			    canvas.font = this.size.font;
			    canvas.fillText(this.ttx,x+this.size.ttxX, y+this.size.ttxY);
			}

			Pixel.setSize = function(size) {
				var r = {};
				r.size = size;
				r.ttxX = Math.floor(0.2*size);
				r.ttxY = Math.floor(0.8*size);
				r.font = Math.floor(size*0.9)+"px Arial";
				return r;
			}

			function KristAd($canvas) {
				this.$canvas = $canvas;
				this.canvas = $canvas[0].getContext("2d");
				this.pixels = [];
				this.width = 0;
				this.height = 0;
				this.size = Pixel.setSize(1);
			}

			KristAd.prototype.load = function(code) {
				this.pixels = [];
				var lines = code.split("\n");
				var tcl = "FFFFFF";
				var bcl = "000000";
				for (var i=0;i<lines.length;i++) {
					var line = lines[i];
					var args = line.split(" ");
					if (args.length == 0) 
						break;
					switch (args[0]) {
						case "x":
							this.width = parseInt(args[1]);
							this.resize();
							break;
						case "y":
							this.height = parseInt(args[1]);
							this.resize();
							break;
						case "tc":
							tcl=args[1];
							break;
						case "bc":
							bcl=args[1];
							break;
						default:
							if (args[0].charAt(0) == "l") {
								this.lineFromString(line.substring(args[0].length+1), parseInt(args[0].substring(1))-1, tcl, bcl);
							}
							break;
					}
				}
			}

			KristAd.prototype.lineFromString = function(text, line, tc, bc) {
				var len = ((line+1)*this.width);
				var j=0;
				var tlen=text.length;
				for (var i=line*this.width; i<len; i++) {
					this.pixels[i] = new Pixel("", tc, bc, this.size);
					if (j<tlen)
						this.pixels[i].ttx = text.charAt(j);
					j++;
				}
			}

			KristAd.prototype.resize = function() {
				if (this.width > this.height)
					this.size = Pixel.setSize(Math.floor(this.$canvas.width()/this.width));
				else
					this.size = Pixel.setSize(Math.floor(this.$canvas.height()/this.height));
			}

			KristAd.prototype.draw = function() {
				var id=0, x=0, y=0;
				for (var i=0; i<this.height; i++) {
					for (var j=0; j<this.width; j++) {
						if (this.pixels[id] != null)
							this.pixels[id].draw(this.canvas, x, y);
						id++;
						x+=this.size.size;
					}
					y+=this.size.size;
					x=0;
				}
			}

			KristAd.prototype.shrink = function() {
				this.$canvas.attr("width", this.width*this.size.size);
				this.$canvas.attr("height", this.height*this.size.size);
				this.draw();
			}

			var colWidth = $("#colCanv").width();
			var colHeight = $("#colCanv").height();

			function refreshAd() {
				$("canvas").attr("width", colWidth);
				$("canvas").attr("height", colHeight);
				var ad = new KristAd( $("canvas") );
				ad.load( editor.getValue() );
				ad.draw();
				$("#shrinkBtn").click(function(){
					ad.shrink();
				});
				$(".well").html("<b>Real Size: </b>"+(ad.height*ad.size.size)+"px x "+(ad.width*ad.size.size)+"px <br>\
					<b>vSize: </b>"+ad.height+" x "+ad.width+"<br>\
					<b>Max Size: </b>"+colHeight+"px x "+colWidth+"px<br>\
					<b>Pixel Size: </b><pre>"+ JSON.stringify(ad.size,null,4)+"</pre");
			}
			refreshAd();
		</script>
	</body>
</html>