El concepto de funcionamiento es relativamente sencillo: se basa en un cuadrado, el cual determinará las medidas porcentuales a modo de simulación de DPIs en los dispositivos móviles, cogiendo el tamaño relativo al la sección más estrecha de la pantalla donde se muestre, siempre entendiendo como ésta un espacio rectangular. Para poder simular los DPI se usará un sistema de división de celdas para dicho cuadrado, donde se dividirá la sección estrecha de la pantalla en ese número de celdas para hallar el tamaño de la misma, valor que se usará para relativizar las medidas, dándose éstas en porcentajes o en celdas, pudiendo ser, en ambos casos, valores decimales. 

El cuadrado que determina la pantalla se centrará y puede dibujarse fuera del mismo a conveniencia del desarrollador si éste lo procisara, luego, la posición inicial de los elementos será la establecida en la configuración mediante los parámetros **base_x** y **base_y** de forma porcentual dentro de ese cuadrado, siendo sus valores por defecto para ambos el ".5", éste indica 50% y representa el centro de dicho cuadrado, pero podemos establecer la siguiente tabla de posiciones medias para entender como funciona este mecanismo:

[|
|=  X   | Y     | Posición
|   0   | 0     | Arriba-Izquierda
|   0   | .5    | Arriba-Centro
|   0   | 1     | Arriba-Derecha
|   .5  | 0     | Centro-Izquierda
|   .5  | .5    | Centro-Centro
|   .5  | 1     | Centro-Derecha
|   1   | 0     | Abajo-Izquierda
|   1   | .5    | Abajo-Centro
|   1   | 1     | Abajo-Derecha
|]

[| style="width:30em;height:30em;"
| \(0, 0)<br />Arriba-Izquierda  | \(0, .5)<br />Arriba-Centro    | \(0, 1)<br />Arriba-Derecha
| \(.5, 0)<br />Centro-Izquierda | \(.5, .5)<br />Centro-Centro   | \(.5, 1)<br />Centro-Derecha
| \(1, 0)<br />Abajo-Izquierda   | \(1, .5)<br />Abajo-Centro     | \(1, 1)<br />Abajo-Derecha
|]

La idea es ir creando formas que estén definidas dentro de un mapeado en formato Array que se vayan dibujando dinámicamente en cada ciclo a partir de esa posición. En el caso de los elementos anidados, dicha posición parte directamente de la posición del padre. El solapamiento o eje Z se automatizaría con la misma idea, dejando atrás a los primeros elementos creados, incluyendo sus anidamientos, todo automatizado gracias al concepto del Array.

> [!#] El concepto del Array es similar al que se puede ver cuando se trabaja HTML, CSS, etc. Donde los elementos se dibujan en base a algo preestablecido y que cuando se cambia algo de éstos, dicho cambio aparece reflejado en el GUI que se esté trabajando. La idea es optimizar el modelo de creación de elementos al máximo mediante cacheados y formas preprogramadas en objetos.

> [!!] Es importante destacar que los cálculos de las posiciones dadas se hacen automáticamente de forma interna por el propio Kanvas, aunque sí es habrá que saber cómo funciona para la creación de formas o elementos personalizados, lo cual, se explicará en el apartado correspondiente más adelante.