Kanvas = function(input){

    const self = this,
          default_settings = {
              quality : 1,
              quality_x : 1,
              quality_y : 1,
              cells : 100,
              origin : 5, // Posición origen. Mirar teclado numérico para ver los diferentes valores para cada posición.
              frames_per_second : 60,
              ratio : null, // Expone la proporción de tamaño del Canvas (16/9 para pantallas WideScreen por ejemplo). Si es equivalente a falso cubrirá todo el área de la capa donde se encuentre.
              overwrite : false,
              position : "body",
              autostart : true,
              object_name : "kanvas",
              class : "kanvas",
              application : "Kanvas",
              x : 0,
              y : 0,
              width : 0,
              height : 0,
              color : "#000",
              blur : 0,
              italic : false,
              bold : false,
              size : 1,
              font : "Arial",
              align : "left",
              alpha : 1,
              degrees : 0,
              baseline : "Alphabetic",
              shadow_x : 0,
              shadow_y : 0,
              shadow_color : "#000",
              shadow_blur : 0,
              border_color : "#000",
              border_width : 0,
              text_italic : false,
              text_bold : false,
              text_size : 1,
              font_family : "Arial",
              text_color : "#000",
              text_align : "left",
              text_alpha : 1,
              rotate_x : 0,
              rotate_y : 0,
              rotate_degrees : 0,
              image_x : 0,
              image_y : 0,
              image_alpha : 1,
              rectangle_color : "#000",
              rectangle_alpha : 1,
              rectangle_x : 0,
              rectangle_y : 0,
              text_baseline : "Alphabetic",
              default_value : null,
              hash_alphabet : "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz",
              hash_length : 7,
              frames_per_second_samples : 20,
              settings_overwrite : false,
              ajax_timeout : 2000
          },
          custom = {},
          // cache = [],
          _screen = {x : 0, y : 0},
          position = {x : 0, y : 0},
          events = {},
          threads = [],
          hashes = [],
          attributes = {
              natives : ["id", "class", "onmousemove", "tabindex", "onkeydown", "onkeyup"]
          },
          cache = {},
          frames_per_second_samples = [],
          delta_time = 0;
    let q, qx, qy, // Calidad porcentual.
        c, // Número de celdas en el lado más corto de la pantalla o área de trabajo rectangular.
        fx, fy, // Posición contra el foco.
        dx, dy, // Distancia desde los laterales hasta el cuadrado de trabajo.
        s, // Tamaño de la celda. Solo se mide un lado pues será cuadrada.
        mx, my, // Posición origen del lienzo.
        thread = null,
        timeout = 0,
        last_time = 0,
        started = false,
        cache_container, context, canvas,
        // cache_l = 0,
        thread_object = null,
        frames_per_second_samples_number,
        last_frame_per_second_sample = Date.now(),
        real_frames_per_seconds = 0,
        ajax_timeout;

    let item_self = this.item_self;
    let hash_self = this.hash_self;
    let object_name = this.object_name;
    let mouse = this.mouse = {x : 0, y : 0};

    this.LOADING = 1 << 0;
    this.LOADED = 1 << 1;
    this.ERROR = 1 << 2;

    this.map = [];

    const null_or_undefined = this.null_or_undefined = value => value === undefined || value === null;

    this.get = (url, callback) => {

        let ended = false;
        const ajax = new XMLHttpRequest(),
              end = status => {
                  if(ended)
                      return;
                  ended = true;
                  typeof callback == "function" && callback(ajax.response, ajax.status, ajax.readyState, status, status == "OK");
              },
              date = Date.now();

        ajax.open("get", url, true);
        ajax.timeout = ajax_timeout;
        ajax.onreadystatechange = () => {
            if(ended)
                return;
            if(ajax.readyState == 4)
                end((ajax.status >= 200 && ajax.status < 300) || [301, 302, 304].includes(ajax.status) ? "OK" : "HTTP_ERROR");
            else if(Date.now() - date > ajax_timeout)
                end("FORCED_TIMEOUT");
        };
        ajax.send(null);

        ajax.ontimeout = () => end("TIMEOUT");
        ajax.onabort = () => end("ABORTED");
        ajax.onerror = () => end("ERROR");

        return ajax;
    };

    const allow_nulls = this.allow_nulls = nulls => typeof nulls == "boolean" ? nulls : settings(["nulls", "allow_nulls"], null, false, false);

    const default_value = this.default_value = (_default, nulls) => _default !== undefined && (nulls || _default !== null) ? _default : settings(["default_value", "default", "by_default"], null, null, true);

    this.settings_add = (inputs, overwrite, callback) => {

        if(inputs instanceof Array){

            let loaded = 0;
            const end = () => ++ loaded == inputs.length && typeof callback == "function" && callback();

            inputs.forEach(input => self.settings_add(input, overwrite, end));

            return;
        };

        if(typeof inputs == "object"){
            typeof overwrite != "boolean" && (overwrite = settings(["settings_overwrite", "overwrite"]));
            for(const key in inputs)
                (overwrite || custom[key] === undefined) && (custom[key] = inputs[key]);
            inputs.autostart !== undefined && (input.autostart = inputs.autostart);
            typeof callback == "function" && callback();
            return;
        };

        if(typeof inputs == "string"){

            let json;

            try{
                if(json = JSON.parse(inputs)){
                    self.settings_add(json, overwrite, callback);
                    return;
                };
            }catch(exception){};

            self.get(inputs, response => {
                try{
                    if(json = JSON.parse(response)){
                        self.settings_add(json, overwrite, callback);
                        return;
                    };
                }catch(exception){};
                typeof callback == "function" && callback();
            });

            return;
        };

        typeof callback == "function" && callback();

    };

    const settings = this.settings = (names, inputs, _default, nulls) => {
        if(!names)
            return default_value(_default, nulls);

        nulls = allow_nulls(nulls);

        const l = (names.push ? names : names = [names]).length,
              m = (inputs = (inputs ? inputs.push ? inputs : [inputs] : []).concat([input, custom, default_settings])).length;

        for(let j = 0; j < m; j ++)
            if(typeof inputs[j] == "object")
                for(let i = 0; i < l; i ++)
                    if(names[i] && inputs[j][names[i]] !== undefined && (nulls || inputs[j][names[i]] !== null))
                        return inputs[j][names[i]];
        return default_value(_default, nulls);
    };

    const threads_function = () => threads.forEach(thread => thread && thread());

    const threads_start = this.threads_start = frames_per_second => thread_object === null && (thread_object = setInterval(threads_function, 1000 / (isNaN(frames_per_second) || frames_per_second < 1 ? settings(["frames_per_second", "fps"]) : frames_per_second)));

    const threads_stop = this.threads_stop = () => {

        if(thread_object === null)
            return;

        clearInterval(thread_object);
        thread_object = null;

    };

    const threads_add = this.threads_add = callback => {
        if(typeof callback != "function")
            return null;

        let i = 0;
        const l = threads.length;

        for(; i < l; i ++)
            if(!threads[i])
                break;

        threads[i] = callback;

        return i;
    };

    const threads_remove = this.threads_remove = i => !isNaN(i) && threads[i] && (threads[i] = null);

    const is_html_object = this.is_html_object = variable => typeof variable == "object" && (variable.tagName || variable.nodeName);

    const preload = this.preload = (selector, callback) => {
        if(typeof callback != "function")
            return;

        if(!selector){
            callback(null, false, "NO_SELECTOR");
            return;
        };
        if(is_html_object(selector)){
            callback(selector, false, "OK");
            return;
        };
        if(!selector.substr){
            callback(null, false, "BAD_TYPE");
            return;
        };

        let item;

        try{
            if(item = document.querySelector(selector)){
                callback(item, false, "OK");
                return;
            };
        }catch(exception){
            callback(null, false, "BAD_SELECTOR");
            return;
        };

        const timeout = settings(["preload_timeout", "timeout"]),
              date = Date.now();
        let preload = threads_add(() => {
            if(item = document.querySelector(selector)){
                threads_remove(preload);
                callback(item, true, "OK");
            }else if(Date.now() - date > timeout){
                threads_remove(preload);
                callback(null, true, "TIMEOUT");
            };
        });

    };

    const hash = this.hash = () => {

        let hash, alphabet = settings(["hash_alphabet", "alphabet"]);
        const length = settings(["hash_length", "length"]),
              l = (alphabet.push ? alphabet : alphabet = alphabet.split("")).length;

        do{
            hash = "";
            while((hash += alphabet[Math.random() * l >> 0]).length < length);
        }while(
            hashes.includes(hash) ||
            /^\d/.test(hash) ||
            document.querySelector("." + hash + ",#" + hash + ",[name=" + hash + "]")
        );
        hashes.push(hash);

        return hash;
    };

    const set_attribute = this.set_attribute = (item, custom_attributes) => {
        if(!is_html_object(item) || typeof custom_attributes != "object")
            return;

        for(const name in custom_attributes)
            item.setAttribute((attributes.natives.includes(name) ? "" : "data-") + name.replace(/[^a-z\d-]+/g, "-"), custom_attributes[name]);

    };

    const construct = () => {

        const custom_attributes = {
            natives : settings("attributes_natives")
        };

        for(const key in custom_attributes){
            !attributes[key] && (attributes[key] = []);
            (custom_attributes ? custom_attributes.push ? custom_attributes : [custom_attributes] : []).forEach(new_attribute => attributes[key].push(new_attribute));
        };

        object_name = self.object_name = settings("object_name");

        settings("autostart") && self.start();

    };

    const Events = this.Events = function(){

        const events = [];

        this.add = callback => {
            if(typeof callback != "function")
                return null;

            let i = 0;
            const l = events.length;

            while(i < l){
                if(events[i] === null)
                    break;
                i ++;
            };

            events[i] = callback;

            return i;
        };

        this.remove = i => !isNaN(i) && i >= 0 && events[i] && (events[i] = null);

        this.execute = (...inputs) => events.forEach(event => event && event(...inputs));

    };

    const range_analyze = range => !range || (
        mouse.x >= range.x && mouse.x <= range.x + range.width &&
        mouse.y >= range.y && mouse.y <= range.y + range.height
    );

    const on_resize_method = screen => {

        if(_screen.x == item_self.offsetWidth && _screen.y == item_self.offsetHeight)
            return;

        const width = canvas.width = (_screen.x = item_self.offsetWidth) * q * qx,
              height = canvas.height = (_screen.y = item_self.offsetHeight) * q * qy;

        if(width < height){
            s = width / c;
            dx = 0;
            dy = -(c - (c * height / width)) / 2;
            mx = position.x;
            my = position.y + dy;
        }else{
            s = height / c;
            dx = -(c - (c * width / height)) / 2;
            dy = 0;
            mx = position.x + dx;
            my = position.y;
        };

        //resize_methods.forEach((method) => {if(method)method();});
        execute_event("resize");

    };

    const position_set = () => {

        const origin = settings("origin");

        position.x = c * (.5 * ((origin - 1) % 3));
        position.y = c * (1 - (.5 * ((origin - 1) / 3 >> 0)));

    };

    const calculate_real_frames_per_seconds = () => {

        const now = Date.now(),
              time = now - last_frame_per_second_sample;

        frames_per_second_samples.push(time);
        last_frame_per_second_sample = now;

        while(frames_per_second_samples.length > frames_per_second_samples_number)
            frames_per_second_samples.shift();

        real_frames_per_seconds = 1000 / (frames_per_second_samples.reduce((a, b) => a + b) / frames_per_second_samples.length);
        delta_time = time / 1000;

    };

    this.start = callback => {

        const end = status => typeof callback == "function" && callback(status);

        if(started){
            end(false);
            return false;
        };
        started = true;

        q = settings(["quality", "q"]);
        qx = settings(["quality_x", "qx"]);
        qy = settings(["quality_y", "qy"]);
        timeout = 1000 / settings("frames_per_second");
        c = settings("cells");
        position_set();
        threads_start();
        ajax_timeout = settings("ajax_timeout");

        preload(settings("position"), (position, asynchronous, error) => {

            if(!position){
                console.error("ERROR. Position HTML for install GUI CANVAS is bad. [" + error + "]");
                return;
            };

            const _class = (hash_self = self.hash_self = hash()) + " " + settings("class");

            !new RegExp("\\b" + default_settings.class + "\\b").test(_class) && (_class += " " + default_settings.class);

            set_attribute(item_self = self.item_self = position.appendChild(document.createElement("div")), {
                id : hash_self,
                hash : hash_self,
                class : _class,
                application : default_settings.application,
                onmousemove : object_name + ".check_mouse(this, event);",
                tabindex : 0,
                onkeydown : object_name + ".key_down(this, event);",
                onkeyup : object_name + ".key_up(this, event);",
                cells : c,
                mouse_x : 0,
                mouse_y : 0
            });
            set_attribute(cache_container = item_self.appendChild(document.createElement("div")), {
                class : "cache"
            });
            set_attribute(canvas = item_self.appendChild(document.createElement("canvas")), {
                class : "canvas"
            });
            context = canvas.getContext("2d");

            thread = threads_add(thread_method);
            on_resize_thread = threads_add(on_resize_method);
            item_self.onclick = () => execute_event("click");

            frames_per_second_samples_number = self.settings("frames_per_second_samples");
            threads_add(calculate_real_frames_per_seconds);

            end(true);

        });

        return true;
    };

    // o = Origin {mx, my}
    const draw = this.draw = (map, context, o) => map && map.forEach((level, i) => level && (level.push && draw(level, context, o || {mx : mx, my : my}) || (level.type && components[level.type] && components[level.type](level, context, self, o || {mx : mx, my : my}))));

    const refresh_draw = () => {

        if(!context)
            return;

        context.clearRect(0, 0, canvas.width, canvas.height);
        draw(self.map, context);

    };

    const thread_method = () => {

        const date = Date.now();

        if(date - last_time < timeout)
            return;
        last_time = date;

        refresh_draw();

    };

    // Establecer posición sobre el foco de origen.
    // Establecer posición sobre los laterales del recuadro o área de trabajo.
    const value = this.value = (value, quality) => q * value * (quality || 1);
    // const _x = this._x = value => q * qx * value * s;
    // const _y = this._y = value => q * qy * value * s;
    const _x = this._x = value => value * s;
    const _y = this._y = value => value * s;

    this.preload_cache_items = (items, callback_per_item, callback) => {

        const end = status => typeof callback == "function" && callback(status);

        typeof items == "string" && (items = [items]);

        if(!(items instanceof Array)){
            end(false);
            return;
        };

        let fully = true,
            loaded = 0;
        const has_callback_per_item = typeof callback_per_item == "function",
              on_item_loaded = (url, ok) => {
                  ok !== undefined && (cache[url].status = ok ? self.LOADED : self.ERROR);
                  cache[url].on_load.execute(url, ok);
                  has_callback_per_item && callback_per_item(url, ok);
                  ok === false && fully && (fully = false);
                  ++ loaded == items.length && end(fully);
              };
        
        items.forEach(url => {

            if(cache[url]){
                if(cache[url].status == self.LOADING)
                    cache[url].on_load.add(has_callback_per_item);
                else 
                    on_item_loaded(url);
                return;
            };
            
            const extension = ((url.match(/\.([^\.]+)/) || [])[1] || "").toLowerCase();

            cache[url] = {
                status : self.LOADING,
                on_load : new Events()
            };

            switch(extension){
                case "jpg":
                case "jpeg":
                case "jpge":
                case "png":
                case "webp":
                case "gif":
                case "tif":
                case "tiff":
                case "pcx":
                case "bmp":

                    const image = new Image();

                    cache[url].type = "image";
                    cache[url].image = image;

                    image.src = url;
                    image.onload = () => on_item_loaded(url, true);
                    image.onerror = () => on_item_loaded(url, false);

                break;
                default:

                    cache[url].type = "unknown";
                    cache[url].status = self.ERROR;
                    on_item_loaded(url, false);

                break;
            };

        });

    };

    const angle = this.angle = (x, y, randians) => {

        if(typeof x == "object"){

            const line = x.push ? {
                x : x[0] - y[0],
                y : x[1] - y[1]
            } : {
                x : x.x - y.x,
                y : x.y - y.y
            };

            x = line.x;
            y = line.y;

        };

        let angle = Math.asin(y / ((x ** 2) + (y ** 2)) ** .5);

        // if(x >= 0)
        //     angle += Math.PI / 2;
        // else
        //     angle = (1.5 * Math.PI) - angle;

        return (x >= 0 ? angle + (Math.PI / 2) : ((1.5 * Math.PI) - angle)) * (randians ? 1 : 180 / Math.PI);
    };

    const shadow = (data, context) => {

        const z = dx < dy ? _x : _y;

        if(!data.ok){
            isNaN(data.x) && (data.x = settings(["shadow_x", "x"]));
            isNaN(data.y) && (data.y = settings(["shadow_y", "y"]));
            !data.color && (data.color = settings(["shadow_color", "color"]));
            isNaN(data.blur) && (data.blur = settings(["shadow_blur", "blur"]));
            data.ok = true;
        };

        context.shadowOffsetX = z(data.x);
        context.shadowOffsetY = z(data.y);
        context.shadowColor = data.color;
        context.shadowBlur = z(data.blur);

    };

    const border = (data, context) => {

        if(!data.ok){
            !data.color && (data.color = settings(["border_color", "color"]));
            isNaN(data.width) && (data.width = settings(["border_width", "width"]));
            data.ok = true;
        };

        context.strokeStyle = data.color;
        context.lineWidth = (dx < dy ? _x : _y)(data.width);

    };

    const components = {
        rotate : (data, context, kanvas, o) => {
            if(data.ignore)
                return;

            if(!data.ok){
                isNaN(data.x) && (data.x = settings(["rotate_x", "x"]));
                isNaN(data.y) && (data.y = settings(["rotate_y", "y"]));
                isNaN(data.degrees) && (data.degrees = settings(["rotate_degrees", "degrees"]));
                data.ok = true;
            };

            // console.log(JSON.stringify(data));
            // console.log(JSON.stringify([_x(data.x + mx), _y(data.y + my)]));

            context.save();
            context.translate(_x(data.x + o.mx), _y(data.y + o.my));
            context.rotate(data.degrees * Math.PI / 180);
            draw(data.childs, context, {mx : 0, my : 0});
            context.restore();

        },
        image : (data, context, kanvas, o) => {
            if(data.ignore)
                return;

            !data.ok && !data.source && (data.source = data.src || data.url);

            if(cache[data.source]){

                if(!data.ok){
                    if(cache[data.source] && cache[data.source].status == self.LOADED){
                        isNaN(data.swidth) && (data.swidth = cache[data.source].image.width);
                        isNaN(data.sheight) && (data.sheight = cache[data.source].image.height);
                        isNaN(data.width) && (data.width = data.swidth);
                        isNaN(data.height) && (data.height = data.sheight);
                    };
                    isNaN(data.x) && (data.x = settings(["image_x", "x"]));
                    isNaN(data.y) && (data.y = settings(["image_y", "y"]));
                    isNaN(data.alpha) && (data.alpha = settings(["image_alpha", "alpha"]));
                    isNaN(data.sx) && (data.sx = 0);
                    isNaN(data.sy) && (data.sy = 0);
                    isNaN(data.mx) && (data.mx = 0);
                    isNaN(data.my) && (data.my = 0);
                    data.ok = true;
                };

                if(cache[data.source].status != self.LOADED)
                    return;

                const half_width = data.width / 2,
                      half_height = data.height / 2;

                context.save();
                context.globalAlpha = data.alpha;
                context.translate(_x(o.mx + data.x + data.mx + half_width), _y(o.my + data.y + data.my + half_height));
                context.rotate(data.rotate * Math.PI / 180);
                context.drawImage(
                    cache[data.source].image,
                    data.sx, data.sy, data.swidth, data.sheight,
                    _x(-half_width), _y(-half_height), _x(data.width), _y(data.height)
                );
                draw(data.childs, context, {mx : 0, my : 0});
                context.restore();

            }else 
                self.preload_cache_items([data.source]);

        },
        // cache : (data, context, kanvas, o) => {
        //     if(data.ignore)
        //         return;

        //     context.save();

        //     if(isNaN(data.cache_i)){

        //         const cache_canvas = cache_container.appendChild(document.createElement("canvas")),
        //               cache_context = cache_canvas.getContext("2d"),
        //               width = data.width || canvas.width,
        //               height = data.height || canvas.height;
        //               image = new Image();

        //         cache_canvas.width = width;
        //         cache_canvas.height = height;

        //         get_new_cache_i(data);
        //         cache_context.save();
        //         // cache_context.translate(_x(-o.mx), _y(-o.my));
        //         draw(data.childs, cache_context, {mx : 0, my : 0});
        //         image.src = cache_canvas.toDataURL("image/png");
        //         cache[data.cache_i] = image;
        //         cache_context.restore();

        //         cache_canvas.remove();

        //     };

        //     context.drawImage(cache[data.cache_i], 0, 0);
        //     context.restore();

        // },
        rectangle : (data, context, kanvas, o) => {
            if(data.ignore)return;

            const proportion = canvas.width > canvas.height ? canvas.width / canvas.height : canvas.height / canvas.width;

            if(!data.ok){
                isNaN(data.alpha) && (data.alpha = settings(["rectangle_alpha", "alpha"]));
                !data.color && (data.color = settings(["rectangle_color", "color"]));
                isNaN(data.x) && (data.x = settings(["rectangle_x", "x"]));
                isNaN(data.y) && (data.y = settings(["rectangle_y", "y"]));
                isNaN(data.width) && (data.width = proportion * c);
                isNaN(data.height) && (data.height = proportion * c);
                isNaN(data.mx) && (data.mx = 0);
                isNaN(data.my) && (data.my = 0);
                data.ok = true;
            };

            context.save();
            data.shadow && (shadow(data.shadow, context));
            context.globalAlpha = data.alpha;
            context.fillStyle = data.color;
            context.translate(_x(o.mx + data.x + data.mx), _y(o.my + data.y + data.my));
            context.rotate(data.rotate * Math.PI / 180);
            context.translate(_x(-data.mx), _y(-data.my));
            context.fillRect(_x(data.x), _y(data.y), _x(data.width), _y(data.height));
            draw(data.childs, context, {mx : 0, my : 0});
            context.restore();

        },
        text : (data, context, kanvas, o) => {
            if(data.ignore)
                return;

            if(!data.ok){
                typeof data.italic != "boolean" && (data.italic = settings(["text_italic", "italic"]));
                isNaN(data.bold) && typeof data.bold != "boolean" && (data.bold = settings(["text_bold", "bold"]));
                isNaN(data.size) && (data.size = settings(["text_size", "size"]));
                data.font && (data.font_family = data.font);
                !data.font_family && (data.font_family = settings(["text_font_family", "text_font", "font"]));
                !data.align && (data.align = settings(["text_align", "align"]));
                isNaN(data.x) && (data.x = settings(["text_x", "x"]));
                isNaN(data.y) && (data.y = settings(["text_y", "y"]));
                !data.text && (data.text = "");
                isNaN(data.alpha) && (data.alpha = settings(["text_alpha", "alpha"]));
                !data.baseline && (data.baseline = settings(["text_baseline", "baseline"]));
                data.ok = true;
            };

            context.save();
            data.shadow && (shadow(data.shadow, context));
            context.globalAlpha = data.alpha;
            context.textAlign = data.align;
            context.textBaseline = data.baseline;
            context.font = (
                (data.italic ? "italic " : "") +
                (data.bold ? isNaN(data.bold) ? "bold " : data.bold + " " : "") +
                (dx < dy ? _x : _y)(data.size) + "px " +
                data.font_family
            );
            if(data.color){
                context.fillStyle = data.color;
                context.fillText(data.text, _x(data.x + mx), _y(data.y + my));
            };
            if(data.border){
                border(data.border, context);
                context.strokeText(data.text, _x(data.x + mx), _y(data.y + my));
            };
            context.restore();

        },
        block : (data, context, kanvas, o) => {
            if(data.ignore)
                return;

            if(!data.ok){
                isNaN(data.alpha) && (data.alpha = settings(["block_alpha", "alpha"]));
                data.ok = true;
            };

            context.save();
            context.globalAlpha = data.alpha;
            draw(data.childs, context, {mx : 0, my : 0});
            context.restore();

        }
    };

    this.add_components = (json, overwrite) => {
        if(!json)
            return;

        !json.push && (json = [json]);
        typeof overwrite != "bool" && (overwrite = settings("overwrite"));

        json.forEach((items) => {
            if(!items)
                return;
            if(items.push)
                self.add_components(items, overwrite);
            else if(typeof items == "object")
                for(let key in items)
                    (overwrite || !components[key]) && (components[key] = items[key]);
        });

    };

    this.extends = (object, overwrite) => {
        for(const key in self)
            (overwrite || object[key] === undefined) && (object[key] = self[key]);
    };

    this.check_mouse = (item, event) => {

        item_self.setAttribute("data-mouse-x", mouse.x = (event.clientX * q * qx / s) - mx);
        item_self.setAttribute("data-mouse-y", mouse.y = (event.clientY * q * qy / s) - my);

        execute_event("mouse_move");

    };

    const on_event = this.on_event = (name, method, range) => {

        if(typeof method != "function")
            return null;

        !events[name] && (events[name] = {
            methods : [],
            l : 0,
            ranges : []
        });

        let i = 0;

        for(; i < events[name].l; i ++)
            if(!events[name].methods[i])
                break;

        events[name].methods[i] = method;
        events[name].ranges[i] = range;
        events[name].l = events[name].methods.length;

        return i;
    };

    const remove_event = this.remove_event = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l && events[name].methods[i] && (events[name].methods[i] = null);

    const execute_event = this.execute_event = (name, input) => {

        if(events[name] && events[name].l)
            for(let i = 0; i < events[name].l; i ++)
                events[name].methods[i] && events[name].methods[i](range_analyze(events[name].ranges[i]), input);

    };

    const event_range = this.event_range = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l ? events[name].ranges[i] : null;

    this.on_mouse_move = (method, range) => on_event("mouse_move", method, range);
    this.on_resize = (method, range) => on_event("resize", method, range);
    this.on_click = (method, range) => on_event("click", method, range);
    this.on_key_down = (method, range) => on_event("key_down", method, range);
    this.on_key_up = (method, range) => on_event("key_up", method, range);

    this.remove_mouse_move = i => {remove_event("mouse_move", i);};
    this.remove_resize = i => {remove_event("resize", i);};
    this.remove_click = i => {remove_event("click", i);};
    this.remove_key_down = i => {remove_event("key_down", i);};
    this.remove_key_up = i => {remove_event("key_up", i);};

    this.range_mouse_move = i => event_range("mouse_move", i);
    this.range_resize = i => event_range("resize", i);
    this.range_click = i => event_range("click", i);
    this.range_key_down = i => event_range("key_down", i);
    this.range_key_up = i => event_range("key_up", i);

    this.key_down = (item, event) => execute_event("key_down", {code : event.keyCode});
    this.key_up = (item, event) => execute_event("key_up", {code : event.keyCode});

    this.get_margins = () => ({x : mx, y : my});
    this.get_position = () => ({x : position.x, y : position.y});
    this.get_cells = () => c;
    this.get_canvas_distance = () => ({x : dx, y : dy});
    this.get_cell_size = () => s;

    this.get_real_frames_per_second = () => real_frames_per_seconds;
    this.delta_time = () => delta_time;

    construct();

};