fillStyle affects on a few objects

[coelacanth]

Hello, guys

could you explain it to me, why does the fillStyle in the drawPlayer function affects the grid too?

var canvas = document.getElementById("MyCanvas");
var ctx = canvas.getContext("2d");


function drawGrid() {
  
  for (var i = 0; i <= canvas.width; i = i + 32){
      ctx.beginPath();
      ctx.rect(0+i, 0, 2, canvas.height);
      ctx.fillStyle = "#F620";
      ctx.fill();
      ctx.closePath();
  }

for (var j = 0; j <= canvas.height; j = j + 32){
  
      ctx.beginPath();
      ctx.rect(0, 0+j,canvas.width, 2);
      ctx.fillStyle = "#F620";
      ctx.fill();
      ctx.closePath();
  }
    
}

function drawPlayer(){
  
    ctx.beginPath();
    ctx.rect(2, 2, 30, 30);
    ctx.fillStyle = "#F40";
    ctx.fill();
    ctx.closePath();
}


function draw() {
  
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();
    drawPlayer();
   

}

setInterval(draw, 10);

 

[Fatalist]

3 hours ago, tsimmermoon said:

"#F620"

I think it can't parse this color, so it ignores it.

#F40 = #FF4400, but a 4-letter color can not be parsed, AFAIK. 

[coelacanth]

1 hour ago, Fatalist said:

I think it can't parse this color, so it ignores it.

#F40 = #FF4400, but a 4-letter color can not be parsed, AFAIK. 

Thank you! I even didn't know that I also can use "red", "black", or change my color to something like "rgba(0, 0, 255, 0.5)". I'm very new to js. 

 

[mattstyles]

the #FFF maps to rgb channels, but its a shorthand for the 6 digit version, as each component goes 0-255, which is 0-FF, hence #FF00FF is rgb(255, 0, 255)