import js.html.CanvasRenderingContext2D;
import js.html.ImageData;
import js.Browser;

class Test
{
    static function main()
    {
        var canvas = js.Browser.document.createCanvasElement();
        canvas.width = 480;
        canvas.height = 320;
        canvas.style.background = "#000";
        var x:Float = 0;
        var y:Float = 0;
        var size:Float = 15;
        var ctx:CanvasRenderingContext2D = canvas.getContext2d();
        var charsOnScreen = Math.floor((canvas.width*canvas.height)/size);
        var delay = 0;

        for (i in 0...charsOnScreen)
        {
            haxe.Timer.delay(function() {
            if (Math.random() < 0.5)
            {
                ctx.moveTo(x,y);
                ctx.lineTo(x+size,y+size);
            }
            else
            {
                ctx.moveTo(x+size, y);
                ctx.lineTo(x-size, y+size);
            }
                x += size;
                if (x > canvas.width)
                    {
                        x = 0;
                        y += size;
                    }
                ctx.strokeStyle = '#FF00FF';
                ctx.stroke();
            }, delay += 5);
        }

        Browser.document.body.appendChild(canvas);
    }
}