Wanneer je ontwikkelt in een web omgeving weet je tegenwoordig niet meer waar je programma zal terecht komen. Dit kan een 4k tv scherm zijn of een verouderde smartphone met 800 x600 resolutie. Om flexibel te zijn en je programma vlot te laten lopen, ondanks deze onzekerheden zijn er systeemvariabelen die je kan gebruiken.
Zo zijn er bijvoorbeeld de variabelen displayWidth en displayHeight, waarin automatisch de breedte en de hoogte van de display waarop je programma verschijnt terechtkomt. Het onderstaande programma maakt een canvas aan dat 1/10de van de displayWidth en displayHeight is:
Naast displayHeight en displayWidth, kan je ook windowWidth en windowHeight gebruiken. Deze variabelen bevatten niet de grootte van het gehele scherm, maar van het venster waarin je programma draait (bv. het browservenster). In dit geval is het venster waarin de code wordt uitgevoerd fixed op 400 pixels.
Vanaf het moment dat je de functie createCanvas hebt uitgevoerd, wordt de hoogte en de breedte van je programma in de variabelen width en height opgeslaan. Handige variabelen om als anker te gebruiken. Als je bijvoorbeeld wil dat iets steeds in het midden wordt geplaatst deel je zowel width als height door 2! Onafhankelijk van de grootte van je programma, zal dit altijd het midden zijn. Voorbeeld:
Als laatste wordt ook 0 als een systeemvariabele beschouwd. Voor zowel x als y, ligt deze altijd links bovenaan. Door combinaties te maken en zaken relatief aan 0 en width en height te plaatsen kan je programma’s bouwen die ongeacht hun omgeving er altijd goed uit zien.
Het volgende programma bevat een lijn die van links naar rechts door het midden van het canvas gaat.
Vul aan met een lijn die van boven naar onder door het midden van het canvas gaat, ongeacht de grootte van hetcanvas.