Canvas - Position eines Kreises im Koordinatensytem bestimmen

[nina20]

Hallo ihr Lieben,

ich habe ein rechteckiges Fenster, wo man die Größe selbst anwählen/angeben kann. Darauf möchte ich 4 Kreise platzieren.
Heißt, wenn ich angebe, dass das Rechteck 500x600px breit ist, so sollen die 4 Kreise in allen Ecken mitlaufen. Sprich, wenn ich die Größe des Rechteckes ändere, so sollen alle 4 Kreise weiterhin mit der gleichen xy Position vorhanden sein.

Wie bekomme ich es hin, dass der 2. Kreis rechts oben in der Ecke immer mitläuft, wenn die Breite des Rechteckes sich ändert?
Kann mir da jemand helfen?

function draw() {                                        
    canvas = document.getElementById('cv1');            
    if (canvas.getContext){                                        
        var context = canvas.getContext('2d');                    
        context.fillStyle   = '#FFFFFF';                         
        context.fillRect  (0, 0, canvas.width, canvas.height); 
            <!-------------Kreis1------------------------->
            context.fillStyle = "#f0b1bc";
            context.beginPath(); <!-----Pfad Beginnt --------->
            context.arc(45, 45, 40, 0, Math.PI * 2, true); 
            context.closePath(); <!-----Pfad Beginnt --------->
            context.fill();    
            <!-------------Kreis2------------------------->
            context.fillStyle = "#4e4e4e";
            context.beginPath(); <!-----Pfad Beginnt --------->
            context.arc(50, 300, 40, 0, Math.PI * 2, true); 
            context.closePath(); <!-----Pfad Beginnt --------->
            context.fill();    
    
    }

2 Kreise sind schon eingefügt. Aber der 2. Kreis läuft halt nicht mit....