Почему я не могу изменить фон моего холста?

Question

Итак, я хочу сделать игру со змеями в качестве начинающего проекта, чтобы заняться созданием игр, и это главная причина, по которой я хочу писать код в первую очередь.

Я сделал свой холст и через некоторое время заставил его появиться на границе.Тем не менее, фон моего холста не изменится, и я не знаю почему.

Я пытался использовать JSHint, но это не очень помогло.

<canvas id="gameCanvas" width="700" height="600" backgroundColor="yellow" style="border:4px solid black;">Good morning</canvas>

Answer 1

Здесь есть два варианта: установка цвета фона с помощью CSS или использование JS для заливки холста цветным прямоугольником.

Атрибут CSS в стиле HTML:

style="border:4px solid black; background: yellow;"

JS:

let canvas = document.getElementById('gameCanvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = 'yellow';
ctx.fillRect(0,0,canvas.width, canvas.height);

Answer 2

Вам необходимо указать цвет фона в атрибуте style, например:

 style="border:4px solid black; background-color: yellow"

См. Демонстрацию ниже:

<canvas id="gameCanvas" width="700" height="600" style="border:4px solid black; background-color: yellow">Good morning</canvas>