Quadratisches Canvas mit CSS

  • Hallo,

    ich habe grade Probleme mit dem skalieren eines Canvas.

    Ein Canvas scheint eine default Höhe, sowie Breite zu haben, ungefähr 300x150px.

    Ich füge nun ein Canvas auf meiner Seite ein, und gebe diesem einen prozentualen Höhenwert mit CSS. Nun bleibt jedoch das Seitenverhältnis gleich - ich hätte aber gerne, dass die Breite den gleichen ABSOLUTEN Wert hat.

    HTML-Code:
    <style>
    #beispiel{
    height:50%;
    }
    </style>
    <canvas id="beispiel"></canvas> 
    Wenn ich per JavaScript die Höhe auslese und der Breite zuordner habe ich zwar ein quadratisches Canvas - jedoch wenn ich dieses anschließend mit JavaScript bemale bezieht sich das Javascript immernoch auf das ursprüngliche Seitenverhältnis. D.H. canvas.width != canvas.height, canvas.width = canvas.height*2.

    Ein runder Kreis wird dann zur Elipse.

    Kann mir da jemand helfen?

    Danke!