Wie mache ich ein Canvas responsive?

AlanHorman

Mitglied
Ich möchte gerne ein Canvas-Element in meine HTML Seite einbinden, die im Responsive Design gehalten ist.
Das Problem ist, mein Canvas ändert sich nicht und wenn ich es verändern möchte:
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>
            Canvas Fenster
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="design.css">
    </head>
    <body>
        <canvas id="canvas" height="500">
        </canvas>
        </script>
    </body>
</html>

CSS:
#canvas {
     position: absolute;
     width: 100%;
}

Dann kann ich das Fenster zwar an der Weite verändern, aber dann verzehrt sich das Bildelement im Canvas so komisch. Gibt es vielleicht einen Besseren Weg, damit die Canvas-Elemente immer noch gut ausschauen?
 
Zurück