Bandeira com centro variável

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

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
var cx=300;cy=200; //Centro do canvas
    pincel.fillStyle = 'black';//lightgrey
    pincel.fillRect(0, 0, (cx*2), (cy*2)); //600 x 400

    pincel.fillStyle = 'green';
    pincel.fillRect((cx-220),(cy-150),440,300);

//Triângulo esquerdo
    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(cx,(cy-130));
    pincel.lineTo((cx-200),cy);
    pincel.lineTo(cx,(cy+130));
    pincel.fill();

//Triângulo direito
    pincel.fillStyle = 'yellow';
    pincel.beginPath();
    pincel.moveTo(cx,(cy-130));
    pincel.lineTo((cx+200),cy);
    pincel.lineTo(cx,(cy+130));
    pincel.fill();

    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.arc(cx,cy,80,0,2*3.14);
    //centro x,y,raio,âng inicial,e arco
    // em radianos
    pincel.fill();

</script>