CODEWITHSUNDEEP
javascripthtmlcanvas
htmljs92
htmljs92

Reputation: 29

How to get device size (mobile)?

I try to draw a circle in the middle of the device browsers width and height. But the canvas element disturb. The circle become draw in the middle of the devices width and height, if I make the canvas big enough, but the canvas size should fit in the device size.

Is there any way to fit the canvas width and height the device width and height?

thats the solution: 

<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
    <style>
    /* Remove padding and margin */
    * { 
      margin:0; 
      padding:0; 
    } 

    html, body, .myCanvas {
      width: 100%;
      height: 100%;
    } 
    </style>
  </head>
  <body>
    <canvas id="myCanvas" class="myCanvas"/>
    <script>

      var canvas = document.getElementById('myCanvas');
      var width = canvas.width;
      var height = canvas.height;

      var context = canvas.getContext('2d');
      var centerX = width / 2;
      var centerY = height / 2;
      var radius = 70;


      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#FF3300';
      context.stroke();

      console.log("width: " + width);
      console.log("height: " + height);
    </script>
  </body>
</html>

Upvotes: 1

Views: 119

Answers (2)

R3tep
R3tep

Reputation: 12864

Use css % size

HTML:

<canvas id="myCanvas" class="myCanvas"/>

CSS: 

/* Remove padding and margin */
* { 
  margin:0; 
  padding:0; 
} 

html, body, .myCanvas {
  width: 100%;
  height: 100%;
}

Edit:

Get the width/height of your canvas instead of the window.

<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
    <style>
    /* Remove padding and margin */
    * { 
      margin:0; 
      padding:0; 
    } 

    html, body, .myCanvas {
      width: 100%;
      height: 100%;
    } 
    </style>
  </head>
  <body>
    <canvas id="myCanvas" class="myCanvas"/>
    <script>

      var canvas = document.getElementById('myCanvas');
      var width = canvas.width;
      var height = canvas.height;

      var context = canvas.getContext('2d');
      var centerX = width / 2;
      var centerY = height / 2;
      var radius = 70;


      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#FF3300';
      context.stroke();

      console.log("width: " + width);
      console.log("height: " + height);
    </script>
  </body>
</html>

Upvotes: 0

Sebastien C.
Sebastien C.

Reputation: 4833

Just add this to your code, right after getting the canvas: 

canvas.width = width;
canvas.height = height;

You can also remove width and height attributes from the html part

Upvotes: 1

Related Questions