# Canvas width defaults to 1024 (Solved, spelling error)

**URL:** <https://phaser.discourse.group/t/canvas-width-defaults-to-1024-solved-spelling-error/5675>\
**Category:** Phaser 3\
**Created:** [March 28, 2020, 4:01pm UTC](https://phaser.discourse.group/t/canvas-width-defaults-to-1024-solved-spelling-error/5675 "2020-03-28T16:01:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rebussharma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rebussharma/32/3056_2.png) [@rebussharma](https://phaser.discourse.group/u/rebussharma)\
**Post date:** [March 28, 2020, 4:01pm UTC](https://phaser.discourse.group/t/canvas-width-defaults-to-1024-solved-spelling-error/5675/1 "2020-03-28T16:01:10Z")

</div>

Just started learning phaser 3 with little prior JS experiecne.  
While instantiating game with required configs, the width value defaults to 1024. how do I set width value to my value.

```
// Class main.js   
 var config = {
      widht : 200,
      height : 200,
      type : Phaser.AUTO,
      parent : 'phaser-example',
      backgroundColor : '#18318C',
      physics:{
        default : 'arcade',
        arcade:{
          gravity: {y: 200}
        }
      },
      scene: [Scene1]
    };

var game = new Phaser.Game(config);

//index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
    minimum-scale=1, user-scalable=no" /> <!-- used to prevent zoom in/out-->
    <title>Game</title>
    <script src="js/phaser.js"></script>
    <script src="js/Scene1.js"></script>
    <!-- include main game file -->
    <script src="js/main.js"></script>
    <style>
      body{
        padding:0px; margin:0px; background: black;
        /* fill screen black */
      }
    </style>
  </head>
  <body>
    <div class="main_canvas" id="phaser-example">
    </div>
  </body>
</html>

//style.css
.main_canvas{
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
/* bring your own prefixes */
  transform: translate(-50%, -50%);
  width: 300px;
  height: 600px;
}
```

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [March 28, 2020, 4:41pm UTC](https://phaser.discourse.group/t/canvas-width-defaults-to-1024-solved-spelling-error/5675/2 "2020-03-28T16:41:50Z")

</div>

You’ve misspelled width as “widht” in your config.

---

<div class="post-metadata">

**Author:** ![rebussharma](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rebussharma/32/3056_2.png) [@rebussharma](https://phaser.discourse.group/u/rebussharma)\
**Post date:** [March 28, 2020, 4:45pm UTC](https://phaser.discourse.group/t/canvas-width-defaults-to-1024-solved-spelling-error/5675/3 "2020-03-28T16:45:37Z")

</div>

Duh!. Thank you. I will be deleting the post as it doesn’t serve as any learning oppurtunity.  
Thanks again
