fillStyle 一直显示黑色，传入的颜色变量没反应。console.log显示变量正确接收到了。

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);

Answer 1

换一下就出来了，你后面的图形覆盖了前面的图形

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('line color is: ' + lineColor);
    draw2D.strokeColor = lineColor;
    draw2D.strokeRect(x, y, 1, 1);
    console.log('bg color is: ' + bgColor);
    draw2D.fillStyle = bgColor;
    draw2D.fillRect(x, y, 1, 1);
};

drawSquare(0, 0, color, strColor);