Solução com "pixels"

Estava com dificuldades para encontrar as coordenadas, então dividi a imagem em uma proporção de "8 x 8 pixels", onde cada "pixel" equivale a 75. Isso dá um canvas de 600 por 600 (preferi deixa quadrado e sem o fundo cinza pq achei mais bonito).

Também criei uma função para desenhar os "pixel" para exercitar o curso anterior.

O legal dessa solução é que se quiser desenhar uma figura maior, basta aumentar o valor do "pixel" para 100, por exemplo. No caso precisaria aumentar também o tamanho do canvas.

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

<script>

    function preencherPixel( inicioX, inicioY, fimX, fimY ){

        return p.fillRect( pixel * inicioX, pixel * inicioY, pixel * fimX, pixel * fimY );
    }

    var t = document.querySelector('canvas');;
    var p = t.getContext( '2d' );

    // proporção dos "pixels".
    var pixel = 75;

    p.fillStyle = 'darkgreen';
    preencherPixel( 0, 0, 8, 8 );

    p.fillStyle = 'black';
    preencherPixel( 1, 2, 2, 2 );
    preencherPixel( 5, 2, 2, 2 );
    preencherPixel( 3, 4, 2, 3 );
    preencherPixel( 2, 5, 1, 3 );
    preencherPixel( 5, 5, 1, 3 );

</script>