html5 fillStyle не работает. показывает черный цвет независимо от значения, в которое я передаю его. Что я сделал не так?

Question

почему в коде не работает fillStyle? Я console.log переменная, которую я передал. Он показывает правильно. хотя он по-прежнему показывает черный квадрат вместо цвета, в который я хотел бы передать его Что я сделал не так?

const canvas = document.getElementById('tetris');
const draw2D = canvas.getContext("2d");


const ROW = 20;
const COL = 10;
//draw2D.fillStyle = '#000';
const strColor = "#FFFFFF";
const color = "#000000";
draw2D.scale(20, 20);

function drawSquare(x, y, bgColor, lineColor) {
    console.log('bg color is: ' + bgColor);
    draw2D.fillStyle = bgColor;
    draw2D.fillRect(x, y, 1, 1);
    console.log('line color is: ' + lineColor);
    draw2D.strokeColor = lineColor;
    draw2D.strokeRect(x, y, 1, 1);
};

drawSquare(0, 0, color, strColor);

<canvas id="tetris"></canvas>

Answer 1

Проблема в том, что вы заполняете прямоугольник размером 1 единицу и затем обводите его шириной линии по умолчанию, равной 1 единице, чтобы штрих полностью покрывал заливку

Также вы написали strokeColor вместо strokeStyle

const canvas = document.getElementById('tetris');
const draw2D = canvas.getContext("2d");


const ROW = 20;
const COL = 10;
//draw2D.fillStyle = '#000';
const strColor = "red";
const color = "green";
draw2D.scale(20, 20);

function drawSquare(x, y, bgColor, lineColor) {
    console.log('bg color is: ' + bgColor);
    draw2D.fillStyle = bgColor;
    draw2D.fillRect(x, y, 1, 1);
    console.log('line color is: ' + lineColor);
    draw2D.lineWidth = 0.1;
    draw2D.strokeStyle = lineColor;
    draw2D.strokeRect(x, y, 1, 1);
};

drawSquare(0, 0, color, strColor);

<canvas id="tetris"></canvas>