Considero essa solução mais simples:
Ao invés de criar uma referência do ponto A e C para o ponto B, e observando que o tamanho da reta AB pode ter o mesmo tamanho da reta BC, fiz essa função declarando variáveis dentro para calcular a espessura do esquadro.
<canvas class="square" width="600" height="600"></canvas>
<script>
var screen = document.querySelector('.square');
var pen = screen.getContext('2d');
function drawSquare (x, y, size, color) {
var inSquare = size / 7.5;
var corner = inSquare * 2.5;
pen.fillStyle = color;
pen.beginPath();
pen.moveTo(x, y);
pen.lineTo(x, y + size);
pen.lineTo(x + size, y + size);
pen.fill();
pen.fillStyle = 'white';
pen.beginPath();
pen.moveTo(x + inSquare, y + corner);
pen.lineTo(x + inSquare, y + size - inSquare);
pen.lineTo(x + size - corner, y + size - inSquare);
pen.fill();
}
drawSquare(100, 100, 400, 'red');
</script>Uma dúvida: Vi na documentação que posso usar o querySelector pra selecionar o canva pela classe, que me ajuda também ao estilizar com o CSS. Essa é uma boa prática?
