constructor() {

        let canvas;
        let ctx;
        let rect0 = [206, 206, 100, 100];
        let point = [0, 0];

        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', function (evt) {
            point[0] = evt.clientX - evt.target.offsetLeft;
            point[1] = evt.clientY - evt.target.offsetTop;
        });
        canvas.style.cursor = 'none';

        function loop() {
            requestAnimationFrame(loop);
            ctx.clearRect(0, 0, 512, 512);

            ctx.fillStyle = '#00ff00';
            ctx.strokeStyle = '#00ff00';
            // *** This is what really matters. ***
            if (RectangleToPointTest(point, rect0)) {
                ctx.fillStyle = '#ff0000';
                ctx.strokeStyle = '#ff0000';
            }
            
            drawRect(ctx, rect0);
            ctx.fillStyle = '#fff';
            ctx.fillRect(point[0], point[1], 1, 1);
        }
        loop();
    }
    constructor() {

        let offset = new Vec2();
        let canvas;
        let ctx;
        let radius = 40;
        let radius2 = 60;
        let circle2Pos = new Vec2(256, 256);

        offset.set(0, 0);;

        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', function (evt) {
            offset.x = evt.clientX - evt.target.offsetLeft;
            offset.y = evt.clientY - evt.target.offsetTop;
        });

        function loop() {
            requestAnimationFrame(loop);
            ctx.clearRect(0, 0, 512, 512);
            ctx.fillStyle = '#00ff00';
            ctx.strokeStyle = '#00ff00';
            // *** This is what really matters. ***
            if (CircleToCircle(offset, radius, circle2Pos, radius2)) {
                ctx.fillStyle = '#ff0000';
                ctx.strokeStyle = '#ff0000';
            }
            drawCircle(ctx, circle2Pos.x, circle2Pos.y, radius2);
            drawCircle(ctx, offset.x, offset.y, radius);
        }
        loop();
    }
    constructor () {

        this.canvas = Canvas(800, 600);

        BackgroundColor(this.canvas, 'rgb(200, 200, 250)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        this.rect = new Rectangle({ x: 200, y: 200, width: 128, fill: true });
        this.rect.createLinearGradient(true, [ 0, '#ff00f0', 0.5, '#05fff0', 1, '#8000ff' ]);

        // let gradient = RadialGradient(this.ctx, 256, 256, 300, 256, 256, 50, [ 0, '#ff00f0', 0.5, '#05fff0', 1, '#8000ff' ]);
        // this.circ = new Circle({ x: 400, y: 300, radius: 128, fill: gradient });

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        BackgroundColor(this.canvas, 'rgb(0, 0, 0)');

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        this.ctx.fillStyle = '#fff';

        this.sinusdots = new SinusDots({ x: 400, y: 300, x1: 1008, y1: 2048, x2: 512, y2: 970, x3: 248, y3: -436, x4: 372, y4: 64 });

        this.sinusdots.addForm({ x1: 7779, y1: -32703, x2: 0, y2: 0, x3: 232, y3: 274, x4: -204, y4: 130 });
        this.sinusdots.addForm({ x1: 7964, y1: 39680, x2: 21, y2: 64, x3: 169, y3: 292, x4: -119, y4: 356 });
        this.sinusdots.addForm({ x1: -309, y1: -16255, x2: 277, y2: 188, x3: 97, y3: 198, x4: -255, y4: 512 });
        this.sinusdots.addForm({ x1: -1093, y1: -1855, x2: 757, y2: 1014, x3: 846, y3: 572, x4: -274, y4: 408 });
        this.sinusdots.addForm({ x1: 864, y1: 2328, x2: 408, y2: 1014, x3: 421, y3: 1220, x4: 18, y4: 94 });
        this.sinusdots.addForm({ x1: -12, y1: 2952, x2: 737, y2: 1518, x3: -357, y3: -833, x4: 40, y4: 46 });
        // this.sinusdots.addForm({ x1: 598, y1: 598, x2: 598, y2: 598, x3: 893, y3: 898, x4: 482, y4: 816 });
        // this.sinusdots.addForm({ x1: 243, y1: 276, x2: 404, y2: 484, x3: 1259, y3: 1144, x4: 916, y4: 1268 });

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
    constructor () {

        this.canvas = Canvas(800, 600);
        this.ctx = GetContext(this.canvas);

        AddToDOM(this.canvas, 'game');

        //  Sprite at 100x100
        this.sprite = {
            name: 'Bob',
            transform: new Transform()
        };

        //  Inject the Transform properties directly into the Sprite object
        this.sprite.transform.addProperties(this.sprite);

        //  Now we can do things like this ...
        this.sprite.x = 32;
        this.sprite.y = 64;

        //  Loader
        this.image = null;
        this.loader = new Loader();
        this.loader.path = 'assets/';
        this.loader.image('mushroom2').then((file) => this.loadComplete(file));
        this.loader.start();

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        BackgroundColor(this.canvas, 'rgb(0, 0, 0)');

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        this.starfield = new Starfield2DDot(800, 600);

        this.starfield.addLayer({ qty: 200, speedX: -2, color: '#0000ff'});
        this.starfield.addLayer({ qty: 200, speedX: -3, color: '#ff0000'});
        this.starfield.addLayer({ qty: 200, speedX: -4, color: '#00ff00'});

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        BackgroundColor(this.canvas, 'rgb(0, 0, 0)');

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        this.starfield = new Starfield2DDot(800, 600);

        this.starfield.addLayer({ qty: 200, speedY: -2, color: '#108A84', starHeight: 2 });
        this.starfield.addLayer({ qty: 200, speedY: -3, color: '#19C3BA', starHeight: 4 });
        this.starfield.addLayer({ qty: 200, speedY: -4, color: '#22F7EC', starHeight: 6 });

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
    constructor() {

        let offset = new Vec2(206, 206);
        let canvas;
        let ctx;
        let angle = 0;
        let cos = Math.cos;
        let sin = Math.sin;
        let poly0 = [
            new Vec2(offset.x + 0, offset.y + 0),
            new Vec2(offset.x + 100, offset.y + 0),
            new Vec2(offset.x + 100, offset.y + 100),
            new Vec2(offset.x + 0, offset.y + 100)
        ];

        let poly1 = [
            new Vec2(0, 0),
            new Vec2(50, 0),
            new Vec2(50, 50),
            new Vec2(0, 50)
        ];

        offset.set(0, 0);;

        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', function (evt) {
            offset.x = evt.clientX - evt.target.offsetLeft;
            offset.y = evt.clientY - evt.target.offsetTop;
        });

        function loop() {

            let transformedPoly1 = new Array(4);

            for (let index = 0; index < 4; ++index) {
                transformedPoly1[index] = [
                    offset.x + poly1[index].x * cos(angle) - poly1[index].y * sin(angle),
                    offset.y + poly1[index].x * sin(angle) + poly1[index].y * cos(angle)
                ];
            }

            ctx.fillStyle = '#00ff00';
            ctx.strokeStyle = '#00ff00';
            // *** This is what really matters. ***
            if (RectPolygonToRectPolygonTest(poly0, transformedPoly1)) {
                ctx.fillStyle = '#ff0000';
                ctx.strokeStyle = '#ff0000';
            }
            requestAnimationFrame(loop);
            ctx.clearRect(0, 0, 512, 512);
            drawPoly(ctx, poly0);
            drawPoly(ctx, transformedPoly1);
            angle += 0.01;
        }
        loop();
    }
    constructor () {

        //  New size, including slightly cut-off height

        let canvas = Grid({ width: 512, height: 300 });

        AddToDOM(canvas, 'game');

    }
    constructor () {

        //  If you just specify the width, the height is set to match it.
        //  Here we use new grid colors too.

        let canvas = Grid({ width: 512, color1: '#3566FF', color2: '#6DC1FF' });

        AddToDOM(canvas, 'game');

    }
    constructor() {
        let mouse = new Vec2(0, 0);
        let canvas = null;
        let ctx = null;
        let body = null;
        let bodies = new Array(4000);

        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        for (let i = 0; i < bodies.length; ++i) {
            bodies[i] = new Body(canvas.width / 2, canvas.height / 2, new RectangleCollider(0, 0, 4, 4));
            bodies[i].acceleration.y = 0.4;
            bodies[i].velocity.x = getRandom(-5.0, 5.0);
            bodies[i].velocity.y = getRandom(-10.0, -1.0);
        }

        canvas.addEventListener('mousemove', function (evt) {
            mouse.x = evt.clientX - evt.target.offsetLeft;
            mouse.y = evt.clientY - evt.target.offsetTop;
        });
        ctx.fillStyle = '#fff';

        function begin() {
            ctx.clearRect(0, 0, 512, 512);
        }

        function update() {
            UpdatePhysics(loop.physicsStep);
        }

        function draw() {
            for (let i = 0; i < bodies.length; ++i) {
                ctx.fillRect(
                    bodies[i].position.x, 
                    bodies[i].position.y, 
                    bodies[i].collider.width, 
                    bodies[i].collider.height
                );
                if (bodies[i].position.y > 512) {
                    bodies[i].position.x = canvas.width / 2;
                    bodies[i].position.y = canvas.height / 2;
                    bodies[i].velocity.y = getRandom(-10.0, -1.0);
                }
            }
            ctx.fillText('fps: ' + loop.fps.toFixed(2), 16, 16);
        }
        let loop = new MainLoop(60);
        loop.begin = (t => begin(t));
        loop.update = (delta => update(delta));
        loop.draw = (t => draw(t));
        loop.start();
    }
    constructor() {

        let offset = new Vec2(206, 206);
        let correctionData = new CorrectionData();
        let canvas;
        let ctx;

        let poly0 = [
            new Vec2(offset.x + 50, offset.y + 0),
            new Vec2(offset.x + 100, offset.y + 100),
            new Vec2(offset.x + 0, offset.y + 100),
        ];

        offset.set(0,0);

        canvas = Canvas(512, 512);
        AddToDOM(canvas, 'game');
        BackgroundColor(canvas, 'rgb(0, 0, 20)');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', function (evt) {
            offset.x = evt.clientX - evt.target.offsetLeft;
            offset.y = evt.clientY - evt.target.offsetTop;
        });

        function loop() {
            let poly1 = [
                new Vec2(offset.x + 0, offset.y + 0),
                new Vec2(offset.x + 100, offset.y + 0),
                new Vec2(offset.x + 100, offset.y + 150),
                new Vec2(offset.x + 0, offset.y + 100)
            ];

            ctx.clearRect(0, 0, 512, 512);
           
            ctx.fillStyle = '#00ff00';
            ctx.strokeStyle = '#00ff00';
            requestAnimationFrame(loop);
            drawPoly(ctx, poly0);
            drawPoly(ctx, poly1);

             // *** This is what really matters. ***
            if (PolygonToPolygonCorrection(poly0, poly1, correctionData)) {
                ctx.fillStyle = '#ff0000';
                ctx.strokeStyle = '#ff0000';
                let resultPoly = new Array(poly1.length)
                for (var i = 0; i < resultPoly.length; ++i) {
                    resultPoly[i] = [poly1[i][0] + correctionData.correction[0],poly1[i][1] + correctionData.correction[1]];
                }   
                drawPoly(ctx, resultPoly);
            }
        }
        loop();
    }
    constructor () {

        //  Here we use a preRender callback to fill the canvas before it gets the Grid applied

        let canvas = Grid({ 
            preRender: (canvas, ctx) => this.addGradient(canvas, ctx), 
            color1: 'rgba(100, 100, 100, 0.5)', 
            color2: 'rgba(100, 100, 100, 0.3)' 
        });

        AddToDOM(canvas, 'game');

    }
    constructor () {

        this.canvas = Canvas(800, 600);
        this.ctx = GetContext(this.canvas);

        AddToDOM(this.canvas, 'game');

        //  Loader
        this.image = null;
        this.loader = new Loader();
        this.loader.path = 'assets/';
        this.loader.image('mushroom2').then((file) => this.loadComplete(file));
        this.loader.start();

    }
    constructor () {

        this.canvas = Canvas(512, 256);

        AddToDOM(this.canvas, 'game');

        this.loader = new Loader();

        this.loader.path = 'assets/';

        this.loader.image('jelly').then((file) => this.loadComplete(file));

        this.loader.start();

    }
    constructor () {

        this.canvas = Canvas(320, 200);

        AddToDOM(this.canvas, 'game');

        this.loader = new Loader();

        this.loader.path = 'assets/';

        this.loader.image('agent-t-buggin-acf_logo').then((file) => this.loadComplete(file));

        this.loader.start();

    }
    constructor () {

        this.canvas = Canvas(512, 512);

        BackgroundColor(this.canvas, 'rgb(0, 0, 20)');

        AddToDOM(this.canvas, 'game');

        let ctx = this.canvas.getContext('2d');

        this.rect1(ctx);
        this.rect2(ctx);
        this.rect3(ctx);
        this.rect4(ctx);

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        BackgroundColor(this.canvas, 'rgb(0, 0, 0)');

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        //  Loader
        this.loader = new Loader();
        this.loader.path = 'assets/';
        this.loader.image('star3').then((file) => this.loadComplete(file));
        this.loader.start();

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        AddToDOM(this.canvas, 'game');

        ImageRendering.crisp(this.canvas);

        this.loader = new Loader();

        this.loader.path = 'assets/';

        this.loader.image('mushroom2').then((file) => this.loadComplete(file));

        this.loader.start();

    }
    constructor () {

        this.canvas1 = Canvas(256, 256);
        this.ctx1 = this.canvas1.getContext('2d');
        let p1 = LinearGradient(this.ctx1, 0, 0, 256, 256, [ 0, '#ff00f0', 0.5, '#05fff0', 1, '#8000ff' ]);

        this.canvas1 = null;
        this.ctx1 = null;

        this.canvas2 = Canvas(256, 256);
        AddToDOM(this.canvas2, 'game');
        this.ctx2 = this.canvas2.getContext('2d');
        let p2 = LinearGradient(this.ctx2, 0, 0, 256, 256, [ 0, '#ee0040', 0.5, '#fff520', 1, '#45a08f' ]);
        Rectangle(this.ctx2, 0, 0, 256, 256);
        FillGradient(this.ctx2, p1);

    }
    constructor () {

        this.canvas = Canvas(512, 96);

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        let i = 0;

        for (let p of PALETTE_ARNE)
        {
            this.ctx.fillStyle = p;
            this.ctx.fillRect(i, 0, 32, 96);
            i += 32;
        }

    }
    constructor () {

        this.canvas = Canvas(512, 256);

        BackgroundColor(this.canvas, 'rgb(0, 0, 50)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        this.ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        this.ctx.font = '14px Courier';

        this.clock = new Clock();

        this.clock.init(() => this.update());

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        this.rect = new Rectangle({ x: 0, y: 100, width: 64, height: 64, fill: 'rgba(255,0,255,1)', anchor: 0.5 });

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);

        this.rect1 = new Rectangle({ x: 0, y: 100, width: 64, height: 64, fill: 'rgba(255,0,255,1)', rotation: 0.1 });
        this.rect2 = new Rectangle({ x: 32, y: 132, width: 64, height: 64, fill: 'rgba(0,255,255,0.8)', scaleX: 2, scaleY: 0.5, rotation: 0.3 });

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
    constructor (image, x, y) {

        super(x, y);

        this.speed = Between(1, 5);
        this.rotateSpeed = 0.02 * this.speed;

        this.texture = { image: image, width: image.width, height: image.height };

        this.element = document.createElement('div');
        this.element.style.background = 'url(assets/mushroom2.png) no-repeat';
        this.element.style.width = image.width + 'px';
        this.element.style.height = image.height + 'px';
        this.element.style['will-change'] = 'transform';
        this.element.style.position = 'absolute';

        SetTransformToCSS(this.transform, this.element);

        AddToDOM(this.element, 'game');

    }
    constructor () {

        this.canvas = Canvas(512, 512);

        BackgroundColor(this.canvas, 'rgb(0, 0, 20)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        this.offset = 0;

        this.loop = new MainLoop(60);

        this.loop.begin = (t => this.begin(t));
        this.loop.update = (delta => this.update(delta));
        this.loop.draw = (t => this.draw(t));

        this.loop.start();

    }
    constructor () {

        this.canvas = Canvas(800, 600);

        AddToDOM(this.canvas, 'game');

        this.renderer = new WebGLBatchedPointRenderer(this.canvas);

        this.pos = new Vec2(100, 100);

        this.velocity = new Vec2();
        this.velocity.length = 4; // speed
        this.velocity.rotate(Math.PI / 4);

        this.pointIndex = this.renderer.addPoint(this.pos.x, this.pos.y);

        this.master = new MasterClock();

        this.master.init(() => this.update());

    }
    constructor () {

        //  Render the sprite data to an existing canvas and DON'T resize it

        this.canvas = Canvas(800, 300);

        BackgroundColor(this.canvas, 'rgb(0, 0, 20)');

        AddToDOM(this.canvas, 'game');

        let data = [
            ' 333 ',
            ' 777 ',
            'E333E',
            ' 333 ',
            ' 3 3 '
        ];

        RenderToCanvas(data, { canvas: this.canvas, palette: PALETTE_ARNE, resizeCanvas: false });

    }
    constructor () {

        this.canvas = Canvas(512, 512);

        BackgroundColor(this.canvas, 'rgb(0, 0, 20)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        Line(this.ctx, 2);

// export default function Rectangle (context, x, y, width = 128, height = 128, angle = 0, fromCenter = false) {

        //  Rotate from corner
        Rectangle(this.ctx, 100, 100, 128, 128, DegToRad(20));

        Stroke(this.ctx, 255, 0, 255);


    }
    constructor () {

        this.canvas = Canvas(800, 600);
        this.canvas.addEventListener('mousedown', e => this.update(e), true);

        AddToDOM(this.canvas, 'game');

        this.ctx = GetContext(this.canvas);
        this.ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        this.ctx.font = '14px Courier';

        this.sprites1 = new Set();
        this.sprites2 = new Set();

        //  Our root transform, right in the middle of the screen
        this.root = new Transform2D({}, null, 400, 300);

        this.sprites1.add(this.root);

        //  And now let's create a bunch of transforms around it
        for (let i = 0; i < 8; i++)
        {
            let child = new Transform2D({}, this.root, -200 + (64 * i), -100);
            this.sprites1.add(child);
        }

        for (let i = 0; i < 8; i++)
        {
            let child = new Transform2D({}, this.root, -200 + (64 * i), -170);
            this.sprites2.add(child);
        }

        //  Loader
        this.image = null;
        this.loader = new Loader();
        this.loader.path = 'assets/';
        this.loader.image('mushroom2').then((file) => this.loadComplete(file));
        this.loader.start();

    }