2

have tried all these questions and answers listed, and nothing works for me!

How to center canvas in html5 Resize HTML5 canvas to fit window

HTML5 Canvas 100% Width Height of Viewport?

Make canvas fill the whole page

Make Html5 Canvas and Its contained image responsive across browsers

jQuery to make HTML5 Canvas Responsive

How to make canvas responsive according to the div parent width

so here's it,

I was playing around with html canvas, it works great on my pc, phone and tablet. The code I'm working on,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Area52</title>
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <style>
    body{
        padding: 0;
        margin: 0;
    }
    .container{
        position: absolute;
        z-index: 0;
    }
    canvas { 
        display: block;
        height: 100%; 
        width: 100%; 
    }

    .details{
        color: #fff;
        top: 150px;
        padding: 20px;
        position: relative;
        z-index: 10;
        font-family: Roboto;
        height: 20px;
    }
    </style>
</head>
<body>
<div class="container">
    <canvas id="myCanvas" style="border:1px solid #000000; background: url('http://upload.wikimedia.org/wikipedia/commons/6/64/The_Puppy.jpg');background-attachment: fixed;background-size: cover;">
    </canvas>
</div>

<div class="details">
    Enter your details:
    <form>
      First name: <input type="text"><br>
      Last name: <input type="text"><br>
      <input type="submit">
    </form>
</div>
</body>
</html>

When the orientation of the tablet is changed and tried to enter some text into the textbox, the canvas element is resized to something strange.

The screenshots:

on tablet portrait

1. in portrait mode, when keyboard is shown, the canvas shrinks to the viewport height!

on tablet landscape

2. in landscape mode, canvas is rendered well,

on tablet landscape with keyboard on

3. in landscape mode, when the keyboard is shown the canvas shrinks to something weird!.

How do I fix the canvas re-sizing when the keyboard is pressed on.

Environment: Chrome 42.0.x on Android 5.1.1

Thanks PS: Background image is just used for demonstration, the actual plan is to canvas and graphic.

Community
  • 1
  • 1
x0x
  • 1,714
  • 3
  • 21
  • 42

1 Answers1

2

Try using fixed position for it:

canvas { 
    position: fixed;
    left:0;
    top:0;
    height: 100%; 
    width: 100%;
    z-index: -1;  /* place in background */
}