```wmd-options
language = es
title_i18n = Kanvas_title_technical_mapper
title_text = Mapeador - Kanvas
```

<!-- [[wmd]] -->

### Mapeador

El mapeador es el elemento donde se mapearán los objetos que contenga nuestro elemento HTML Canvas, procesado y gestionado sobre Kanvas. El acceso a dicho elemento es público y la variación de los elementos que contiene es dinámica presentándose directamente en el GUI como resultado.

```js

/** @type {AnP} */
const anp = new AnP({
    globals : {
        anp_root : "https://anp.k3y.pw"
    }, 
    callback : () => {

        /** @type {Kanvas} */
        const kanvas = new Kanvas(anp);
        /** @type {boolean} */
        let done = false, 
            /** @type {number|null} */
            time = null;

        // Creamos elementos en el mapa.
        kanvas.map = [
            {type : "rectangle", x : -20, y : -20, width : 40, height : 40, background : "#F00", rotate : 45, alpha : .6, childs : [
                {type : "rectangle", x : 14, y : 14, width : 4, height : 4, background : "#8F8"}
            ]}, 
            {type : "rectangle", x : -5, y : -3, width : 10, height : 6, background : "#0BA", alpha : .4}, 
            {type : "text", x : 20, y : -20, text : "FPS", baseline : "top", align : "right", style : "bold", color : "#600", size : 2}, 
            {type : "image", x : -10, y : -10, width : 20, height : 20, source : "https://cdn.k3y.pw/data/space_art_publish/red_giant.png", rotate : 45}, 
            {type : "text", x : 20, y : -18, text : "Delta", baseline : "top", align : "right", style : "bold", color : "#600", size : 2}
        ];

        // Cambio de FPSs
        anp.threads.restart(24);

        // Hilo donde se gestionan los cambios dentro del mapa.
        anp.threads.add(() => {

            /** @type {number} */
            const new_time = Date.now();

            if(done){
                kanvas.map[0].rotate(1 * kanvas.delta);
                kanvas.map[0].childs[0].rotate(-3 * kanvas.delta);
                kanvas.map[3].rotate(-1 * kanvas.delta);
                time && (kanvas.map[2].text = kanvas.fps.toFixed(2) + " FPS");
                kanvas.map[4].text = kanvas.delta.toFixed(3) + " Delta";
            }else 
                done = kanvas.map.every(item => item.state & Kanvas.prototype.LOADED);

            time = new_time;

        });

    }
})

```

<!-- [[wmd]] -->