title: why is my textalign not editable?
body: <p>Heyy guys,</p>
  
  <p>I am trying to make a sort of a game. Butt it is not going very well..</p>
  
  <p>If you look at the piece of my game below and run it you will see red and green objects in the top. After these objects are numbers like: 200/200. The hole top is placed under <code>legenda.draw()</code></p>
  
  <p>What I want is <code>textAlign = "initial"</code> just the default for these numbers.</p>
  
  <p>But if you look at the red square with "klaar", I want that one the <code>textAlign = "center"</code>. The square is placed under <code>koopscherm.draw()</code>.</p>
  
  <p>Now you know what I want I can tell you my problem. When I run the script all the text is centered. And I want just the square to be centererd ( &lt;-- don`t know how to write).</p>
  
  <p>I found out that if I first run <code>legenda.draw()</code> and then <code>koopscherm.draw()</code> the problem is fixed. But for my game it is important to first run <code>koopscherm.draw()</code>.</p>
  
  <p>Sooo.. I want to have the text for <code>koopscherm.draw()</code> in the center and for <code>legenda.draw()</code> as default.</p>
  
  <p>Thnx for all your help!</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;style&gt;
      body{
          background-color:white;
      }
      * {cursor: none;}
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
      function Canvas(){
          var ctx = document.getElementById('game').getContext('2d');
          var cw = ctx.canvas.width;
          var ch = ctx.canvas.height;
  
          var keys = [];
  
          var cursor = new Image();
          cursor.src = "nothing"
  
          function legenda(){
              this.x = 10, this.y = 10, this.w = 160, this.h = 23, this.color = "black", this.max = cw*0.125, this.geld = 0;
              this.x2 = cw*0.6, this.y2 = 10, this.w2 = 160, this.h2 = 23, this.color2 = "black", this.alle_lv = 200, this.aantal_lv = this.alle_lv;
              this.w3 = cw, this.h3 = ch*0.1, this.x3 = 0, this.y3 = 0, this.color3 = "lightgray", this.trans3 = 0.5;
              this.st_w = 0, this.st_h = this.h/1.1, this.st_x = this.x + (this.x-(this.x/1.1)), this.st_y = this.y + (this.y-(this.y/1.1)), this.st_color = "red";
              this.st_w2 = 0, this.st_h2 = this.h2/1.1, this.st_x2 = this.x2 + (this.x2-(this.x2/1.0025)), this.st_y2 = this.y2 + (this.y2-(this.y2/1.1)), this.st_color2 = "#33CC33";
              this.const_plus = 7/100, this.const = this.w*0.99/7, this.const2 = this.w2*0.99/200;
              this.draw = function(){
                  //menu balk
                  ctx.globalAlpha = this.trans3
                  ctx.fillStyle = this.color3;
                  ctx.fillRect(this.x3,this.y3,this.w3,this.h3);
  
                  //check
                  ctx.globalAlpha = 1;
  
                  // magazijn
                      //zwarte achtergrond
                      ctx.fillStyle = this.color;
                      ctx.fillRect(this.x,this.y,this.w,this.h);
  
                      //aantal magazijn
                      this.st_w = 0;
                      for(var i=0;i&lt;7;i++){
                          this.st_w+=this.const
                      }
  
                      ctx.fillStyle = this.st_color;
                      ctx.fillRect(this.st_x,this.st_y,this.st_w,this.st_h);
  
                      //magazijn in nummers
                      ctx.font="17px Arial";
                      ctx.textBaseline="middle";
                      ctx.textAlign = "initial";
                      ctx.fillStyle = "black";
                      var text = Math.round(7)+" / "+7;
                      ctx.fillText(text,this.x+this.w+7.5,this.y+this.h*0.5,this.max);
  
  
                  // levens van het fort
                      //zwarte achtergrond
                      ctx.fillStyle = this.color2;
                      ctx.fillRect(this.x2,this.y2,this.w2,this.h2);
  
                      //stukjes2
                      this.st_w2 = 0;
                      for(var i=0;i&lt;200;i++){
                          this.st_w2+=this.const2
                      }
  
                      ctx.fillStyle = this.st_color2;
                      ctx.fillRect(this.st_x2,this.st_y2,this.st_w2,this.st_h2);
  
                      //levens in nummers
                      ctx.font="17px Arial";
                      ctx.textBaseline = "middle";
                      ctx.textAlign = "initial";
                      ctx.fillStyle = "black";
                      var text = Math.round(200)+" / "+200;
                      ctx.fillText(text,this.x2+this.w2+7.5,this.y2+this.h2*0.5,this.max);
  
  
                  // geld
                      //geld in nummers
                      ctx.font="17px Arial";
                      ctx.textBaseline = "middle";
                      ctx.textAlign = "center"
                      ctx.fillStyle = "black";
                      var text = "\u20AC"+this.geld;
                      ctx.fillText(text,cw*0.48,this.y2+this.h2*0.5,cw*0.12);
              }
          }
  
  
          function koopscherm(){
              this.tekst = [({"text":"Klaar","font":"17px Arial","Baseline":"middle","textAlign":"center","color":"black","x":cw*0.03+(cw*0.45*0.5),"y":ch*0.88+(ch*0.08*0.5),"max":cw*0.45})];
              this.vierkanten = [
                                 {"x":cw*0.03,"y":ch*0.88,"w":cw*0.45,"h":ch*0.08,"color":"lightgray"}
                                ];
              this.draw = function(){
                  //draw
                  for(var i=0;i&lt;this.vierkanten.length;i++){
                      var v = this.vierkanten[i];
                      ctx.fillStyle = v.color;
                      ctx.fillRect(v.x,v.y,v.w,v.h);
                  }
                  for(var i=0;i&lt;this.tekst.length;i++){
                      var v = this.tekst[i];
                      ctx.font = v.font;
                      ctx.textBaseline = v.Baseline;
                      ctx.textAlign = v.textAlign;
                      ctx.fillStyle = v.color;
                      ctx.fillText(v.text,v.x,v.y,v.max);
                  }
                  //check
                  ctx.textAlign = "initial";
  
                  //muis
                  //ctx.drawImage(cursor,this.x2,this.y2,12,22);
              }
          }
  
          var legenda = new legenda();
          var koopscherm = new koopscherm();
  
          function draw() {
              ctx.save();
              ctx.clearRect(0,0,cw,ch);
  
              //draw
  
              koopscherm.draw();
              legenda.draw();
  
              ctx.restore();
          }
  
          var animateInterval = setInterval(draw,1);
  
          ctx.canvas.addEventListener('click', function(event){
              koopscherm.dx = event.clientX;
              koopscherm.dy = event.clientY;
          });
      }
  
      window.addEventListener('load', function(event) {
              Canvas();
      });
  &lt;/script&gt;
  
  &lt;div id="center_canvas"&gt;
  &lt;canvas id="game" width="650px" height="450px"&gt;
      Je hebt een nieuwere browser nodig om dit te spelen!
  &lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>