loadComplete (file) {

        const ctx = GetContext(this.canvas);

        Smoothing.disable(ctx);

        Fill(ctx, 120, 0, 120);

        DrawImage(ctx, file.data, { 
            x: 200, y: 200, 
            scaleX: 2, scaleY: 2
        });

        DrawImage(ctx, file.data, { 
            x: 350, y: 200, 
            scaleX: 2, scaleY: 2,
            blendMode: 'lighter'
        });

        DrawImage(ctx, file.data, { 
            x: 500, y: 200, 
            scaleX: 2, scaleY: 2,
            blendMode: 'overlay'
        });

    }
    draw (i) {

        // DrawImage(this.ctx, this.image, { x: this.sprite1.x, y: this.sprite1.y, anchorX: 0.5, anchorY: 0.5 });
        DrawImage(this.ctx, this.image, { x: this.sprite1.x, y: this.sprite1.y });

        //  interpolated
        // let tx = (this.px + (this.x1 - this.px) * i);
        // this.ctx.fillRect(tx, 200, 128, 128);

    }
    draw (i) {

        DrawImage(this.ctx, this.image, { x: this.sprite1.x, y: this.sprite1.y, rotate: this.sprite1.rotation, scaleX: this.sprite1.scaleX, scaleY: this.sprite1.scaleY, anchorX: 0.5, anchorY: 0.5 });

    }