["tilescript", ["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