Farem un exemple que ens permetrà veure com funciona el canvas i com podem dibuixar-hi. La nostra aplicació permetrà indicar un nombre del 3 al 20 amb un control lliscant i ens dibuixarà el polígon del nombre de costats triat. A més, hi haurà dos selectors que ens permetran dir-li que dibuixi els eixos i la circumferència circumscrita al polígon.
La pantalla estarà dividida verticalment en tres parts. A la part superior hi haurà el canvas que ocuparà tot l'espai que no ocupin els altres elements. A sota hi haurà dos horizontal arrangement, un on hi haurà el control del nombre de costats i un altre per als selectors.
En el primer horizontal arrangement hi haurà un label on s'indicarà el nombre seleccionat, l'slider per triar el valor i un label per deixar una mica d'espai.
En el segon horizontal arrangement hi haurà un label per deixar una mica d'espai i dos checkbox.
Podrem dibuixar polígons de 3 (no n'hi ha de més petits) a 20 costats. El controlador lliscant va millor si comença des de 0. Per aixo, el farem anar de 0 a 17 i sumarem 3 al valor llegit.
El resultat, un cop configurats els elements serà aquest:
Les següents taules mostren les propietats de cada un dels elements:
| Propietat | Valor | Comentaris |
| Nom | Canvas_Dibuix | Aquest nom l'hem de posar en el requadre Components |
| Height | Fill parent... | Alçada del requadre |
| Width | Fill parent... | Amplada del requadre |
| Propietat | Valor | Comentaris |
| Nom | HorizontalArrangement1 | Aquest nom l'hem de posar en el requadre Components |
| Width | Fill parent... | Amplada del requadre |
| Propietat | Valor | Comentaris |
| Nom | Label_v | Aquest nom l'hem de posar en el requadre Components |
| Propietat | Valor | Comentaris |
| Nom | Slider1 | Aquest nom l'hem de posar en el requadre Components |
| ColorLeft | Red | El tros a l'esquerra de la peça lliscant serà vermell |
| ColorRight | Blue | El tros a la dreta de la peça lliscant serà blau |
| MaxValue | 17.0 | Quan sumem 3 quedarà 20 |
| MinValue | 0.0 | Quan sumem 3 quedarà 3 |
| ThumbPosition | 5.0 | En començar serà 5 i el polígon serà de 8 costats |
| Propietat | Valor | Comentaris |
| Nom | Label1 | Aquest nom l'hem de posar en el requadre Components |
| Text | Tres espais |
| Propietat | Valor | Comentaris |
| Nom | HorizontalArrangement2 | Aquest nom l'hem de posar en el requadre Components |
| Width | Fill parent... | Amplada del requadre |
| Propietat | Valor | Comentaris |
| Nom | Label2 | Aquest nom l'hem de posar en el requadre Components |
| Text | Tres espais |
| Propietat | Valor | Comentaris |
| Nom | CheckBox_eixos | Aquest nom l'hem de posar en el requadre Components |
| Text | Eixos | Porta 10 espais a la dreta |
| Propietat | Valor | Comentaris |
| Nom | CheckBox_circ | Aquest nom l'hem de posar en el requadre Components |
| Text | Circumferència |
Creem sis variables on guardarem els valors màxims de les coordenades X i Y, les coordenades del centre, el radi de la circumferència i el nombre de costats seleccionat. Les inicialitzem a zero perquè hi ha algunes operacions que no es poden fer en la inicialització.
El programa tindrà tres funcions. La funció valor calcularà el nombre de costats a partir de la posició del control lliscant. Converteix el valor llegit (entre 0 i 17) en un enter, li suma 3 (ara està entre 3 i 20) i ho mostra en l'etiqueta corresponent.
La funció poligon s'encarregarà de dibuixar el polígon al canvas. Cal dibuixar tants costats com s'hagi indicat. Comença per un vèrtex situat a l'eix horitzontal positiu. Cada vèrtex estarà girat un angle de 360° dividit pel nombre total. Per a cada vèrtex, dibuixa una línia entre el vèrtex anterior i l'actual.
La funció dibuixar crida a la funció valor i a la funció poligon i, si s'ha demanat, dibuixa la circumferència i els eixos.
Quan es carrega la pantalla esborrarem tot el que hi ha dibuixat i inicialitzarem les variables. Els valors màxims seran les mides del canvas, els del centre la meitat d'aquests i el radi el posarem al 35 % de la mida més petita de les dues màximes (correspon a un diàmetre del 70 %). Després dibuixarem.
Cada cop que es modifiqui un dels dos selectors o la posició del cursor lliscant tornarem a dibuixar.
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.