title: How can i change the color of a javascript object?
body: <p>I've created a simple code that looks a bit like "Impossible Game". I'm new with javascript so my question might sound a bit strange but i've created a few opjects like you can see below. When i change the color with ctx.fillstyle all my objects change this specific color. How can i give each object a different color?</p>
  
  <p>Thanks ;)</p>
  
  <pre><code>var PlayerX;
  var Blocka;
  var Ground
  
  var canvas = document.getElementById("gamefield");
  ctx = canvas.getContext("2d");
  
  var Gamespeed = 5;
  var Gravity = 0.9;
  var Score = 0;
  var velocity = 0.01;
  var jumping;
  
  PlayerX = new Player();
  Blocka = new Block(1);
  Ground = new Gameground();
  
  setInterval(Update, 20);
  
  function startGame() {
  
  }
  
  function Player() {
    // this staat voor verwijzing naar zichzelf
    this.width = 30;
    this.height = 50;
    this.x = canvas.width / 4;
    this.y = canvas.height / 3 * 2;
    this.draw = function() {
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  
  }
  
  function Block(kolb) {
    this.width = 20;
    this.height = 40;
    this.show = true;
    //this.x = canvas.width/2;
    this.x = canvas.width + 20;
    this.y = (canvas.height / 3 * 2) + 10;
    this.draw = function() {
      this.move();
      if (this.show) {
        if (kolb == 1) {
          ctx.fillRect(this.x, this.y, this.width, this.height);
        }
      }
    }
    this.move = function() {
      this.x -= Gamespeed;
      this.death();
    }
    this.death = function() {
      if (this.x &lt;= 20) {
        this.show = false;
      }
    }
  }
  
  function Gameground() {
    // this staat voor verwijzing naar zichzelf
    this.width = 800;
    this.height = 150;
    this.x = 0;
    this.y = 450;
    this.draw = function() {
      ctx.fillStyle = "#00FFBF"
      ctx.fillRect(this.x, this.y, this.width, this.height);
    }
  }
  
  function Update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    Blocka.draw();
    PlayerX.draw();
    if (PlayerX.x &lt; Blocka.x + Blocka.width &amp;&amp;
      PlayerX.x + PlayerX.width &gt; Blocka.x &amp;&amp;
      PlayerX.y &lt; Blocka.y + Blocka.height &amp;&amp;
      PlayerX.height + PlayerX.y &gt; Blocka.y) {
      // collision detected!
      ctx.fillStyle = "#FF0000";
    }
  
    Ground.draw();
  }
  
  window.addEventListener("keydown", checkKeyPressed, false);
  
  function checkKeyPressed(e) {
    if (e.keyCode == "32") { //kijkt of de spatiebalk is ingedrukt
  
      var interval1, interval2, velo, tijd;
  
      velo = 0.00001;
  
      tijd = 20;
      interval1 = setInterval(plus, tijd);
  
      function plus() {
  
        if (velo &lt; 20) {
          velo += 1.5;
        } else {
          velo -= 1.5;
        }
  
        if (PlayerX.y &gt; 480) {
          clearInterval(interval1);
          interval2 = setInterval(min, tijd);
        }
  
        PlayerX.y += velo;
        console.log(PlayerX.y);
      }
  
      function min() {
  
        if (velo &lt; 20) {
          velo += 1.5;
        } else {
          velo -= 1.5;
        }
  
        if (PlayerX.y &lt; 430) {
          clearInterval(interval2);
        }
  
        PlayerX.y -= velo;
        console.log(PlayerX.y);
      }
    }
  }
  </code></pre>