["tilescript", ["html", "

This is a play for me to learn TileScript and JavaScript

\n\n"], ["html", "

The Canvas is created by using HTML code. It has a fixed position, so it can be seen\neven when scrolling down. But this is no perfect solution... :-/

"], ["html", "\n\n"], ["html", "

the folling make the canvas available for scripting

"], ["source", "cl= function(){\n canvas=$('canvas');\n ctx=canvas.getContext('2d');\n ctx.clearRect(0,0,canvas['width'],canvas['height'])\n}\n\ncl()"], ["html", "

Now it is time to draw a rectangle, I use variable to make the customization of the rectangle easy

"], ["source", "\ndrawRectangle= function (x,y,w,h) {\n ctx.moveTo(x, y)\n ctx.lineTo(x+w,y)\n ctx.lineTo(x+w,y+h)\n ctx.lineTo(x, y+h)\n ctx.lineTo(x, y)\n ctx.stroke()}\n\ndrawRectangle(10,20,30,40)\ndrawRectangle(50,50,30,40)\n\n"], ["tile", "{drawRectangle(10,20,30,40);drawRectangle2(100,100,30,40)}"], ["html", "

but we don't need to write this for ourself, we can use function of the JavaScript Canvas API

"], ["source", "ctx.fillRect(15,15,120,120);"], ["html", "

or we can try out complete examples from the web

"], ["source", "cl()\nfunction draw() {\n\n ctx.save();\n ctx.translate(75,75);\n\n for (i=1;i<6;i++){ // Loop through rings (from inside to out)\n ctx.save()\n ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'\n\n for (j=0;j