RESOLUÇÃO DO EXERCICIO - USANDO WHILE PARA SIMULAR OS CM

Boa noite, Não sei se fiz da forma mais pratica, e tem que fazer algumas correções, mas quis brincar com a ideia do esquadro e fazer os cm, e praticar o while, acredito que uma função cairia bem também.

<canvas width="400" height="400"></canvas>

<script>


var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');


//esquadro
pincel.fillStyle = 'lightgrey';
pincel.fillRect(0,0,400,400);

pincel.fillStyle = 'black';
pincel.beginPath();
pincel.moveTo(0,0);
pincel.lineTo(0,400);
pincel.lineTo(400,400);
pincel.fill();

pincel.fillStyle = 'lightgrey';
pincel.beginPath();
pincel.moveTo(50,110);
pincel.lineTo(50,350);
pincel.lineTo(275,350);
pincel.fill();

var posicao = 12;

while( posicao <= 380){

pincel.fillStyle = 'white';
pincel.fillRect(posicao,380,3,20);
posicao = posicao + 12
}

var posicao2 = 6
while( posicao2 <= 380){

pincel.fillStyle = 'white';
pincel.fillRect(posicao2,390,3,10);
posicao2 = posicao2 + 6
} 

// vertical

var posicao3 = 6
while( posicao3 <= 380){
pincel.fillStyle = 'white';
pincel.fillRect(0,posicao3,10,3);
posicao3 = posicao3 + 6
}

var posicao4 = 12
while( posicao4 <= 380){
pincel.fillStyle = 'white';
pincel.fillRect(0,posicao4,20,3);
posicao4 = posicao4 + 12
}
</script>