<canvas width='600' height='400'></canvas>

<script>

    // dimensões da tela
    var X = 600;
    var Y = 400;

    // quantidade de partes que será dividido cada eixo
    var segsX = 12;
    var segsY = 10;

    // tamanho de cada módulo
    var modX = X / segsX;
    var modY = Y / segsY;

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

    // retangulo verde
    pincel.fillStyle = 'green';
    pincel.fillRect(0, 0, X, Y);

    // losango amarelo
    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(modX, Y/2);  // primeiro ponto esquerdo
    pincel.lineTo(X/2, modY);
    pincel.lineTo(modX * (segsX-1), Y/2);
    pincel.lineTo(X/2, modY * (segsY-1));
    pincel.fill();

    // circulo azul
    pincel.fillStyle = 'darkblue';
    pincel.beginPath();
    pincel.arc(X/2, Y/2, modX*2, 0, 2*3.14);
    pincel.fill();

</script>