Html5 Inserir texto em canvas

Segue um exemplo de utilização de texto em <canvas>.
O gráfico forma a relação de tamanhos de um calçado disponíveis ou não em estoque.

<canvas>
Esse elemento define a região no documento a ser usada como um canvas bitmap. Scripts são usados para renderizar gráficos interativamente.
Sintaxe:

• id - identificador alfanumérico
• width - largura (pixels)
• heigth - altura (pixels)
• style - informações do estilo

<canvas id="n33" width="25" height="25" style="border:1px solid #808080"></canvas>

<script>
getContext (context id) - Retorna um objeto que expõe a API necessária para acessar as funções gráficas.
var ctx=c.getContext("2d");

fillStyle - Inclui a cor ou o estilo aplicado a uma chamada de fill().
ctx.fillStyle = "#eeecec";

fillRect (x, y, w, h) - x e y determinam a posição inicial, w determina a largura e h determina a altura do retangulo. A aparência é determinada por fillStyle.
ctx.fillRect(0, 0, 30, 30);

fillText(text, x, y [, maxWidth]) - O texto (text) é escrito na posição (x, y) de acordo com fillStyle.
ctx.fillText("33", 5, 17);

<div style="color:#000000"> Escolha um tamanho:</div> <br /> <canvas id="n33" width="25" height="25" style="border:1px solid #808080"></canvas> <script type="text/javascript"> var c=document.getElementById("n33"); var ctx=c.getContext("2d"); ctx.fillStyle = "#eeecec"; ctx.fillRect(0, 0, 30, 30); ctx.fillStyle="#808080"; ctx.font = "10pt arial"; ctx.fillText("33", 5, 17); ctx.fillStyle = "#ff0000"; ctx.font = "8pt georgia"; ctx.fillText("x", 18, 23); </script> <canvas id="n34" width="25" height="25" style="border:1px solid #808080"></canvas> <script type="text/javascript"> var c=document.getElementById("n34"); var ctx=c.getContext("2d"); ctx.fillStyle = "#eeecec"; ctx.fillRect(0, 0, 30, 30); ctx.fillStyle="#808080"; ctx.font = "10pt arial"; ctx.fillText("34", 5, 17); ctx.fillStyle = "#ff0000"; ctx.font = "8pt georgia"; ctx.fillText("x", 18, 23); </script> <canvas id="n35" width="25" height="25" style="border:1px solid #808080"></canvas> <script type="text/javascript"> var c = document.getElementById("n35"); var ctx = c.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, 30, 30); ctx.fillStyle = "#000000"; ctx.font = "10pt arial"; ctx.fillText("35", 5, 17); </script> <canvas id="n36" width="25" height="25" style="border:1px solid #808080"></canvas> <script type="text/javascript"> var c=document.getElementById("n36"); var ctx=c.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, 30, 30); ctx.fillStyle="#000000"; ctx.font = "10pt arial"; ctx.fillText("36", 5, 17); </script> <canvas id="n37" width="25" height="25" style="border:1px solid #808080"></canvas> <script type="text/javascript"> var c=document.getElementById("n37"); var ctx=c.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, 30, 30); ctx.fillStyle="#000000"; ctx.font = "10pt arial"; ctx.fillText("37", 5, 17); </script> <canvas id="n38" width="25" height="25" style="border:1px solid #808080"></canvas> <script type="text/javascript"> var c=document.getElementById("n38"); var ctx=c.getContext("2d"); ctx.fillStyle = "#eeecec"; ctx.fillRect(0, 0, 30, 30); ctx.fillStyle="#808080"; ctx.font = "10pt arial"; ctx.fillText("38", 5, 17); ctx.fillStyle = "#ff0000"; ctx.font = "8pt georgia"; ctx.fillText("x", 18, 23); </script> <canvas id="n39" width="25" height="25" style="border:1px solid #808080"></canvas> <script type="text/javascript"> var c=document.getElementById("n39"); var ctx=c.getContext("2d"); ctx.fillStyle = "#eeecec"; ctx.fillRect(0, 0, 30, 30); ctx.fillStyle="#808080"; ctx.font = "10pt arial"; ctx.fillText("39", 5, 17); ctx.fillStyle = "#ff0000"; ctx.font = "8pt georgia"; ctx.fillText("x", 18, 23); </script>