# Wie mache ich ein Canvas responsive?



## AlanHorman (16. März 2017)

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:

```
<!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>
```


```
#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?


----------



## SpiceLab (16. März 2017)

AlanHorman hat gesagt.:


> Gibt es vielleicht einen Besseren Weg, damit die Canvas-Elemente immer noch gut ausschauen?


Aber sicher 

http://ameijer.nl/2011/08/resizable-html5-canvas/

http://www.fabiobiondi.com/blog/201...-canvas-resize-fullscreen-and-liquid-layouts/

http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/
Demos:

https://jsfiddle.net/lannymcnie/4yy08pax/
https://codepen.io/straker/pen/yasit
[edit]Demos ergänzt[/edit]​


----------

