Есть ли что-то, что я делаю неправильно, пытаясь сделать прямоугольник?

Question

Я пытаюсь сделать прямоугольник, заполнив его html / javascript, но по какой-то причине, хотя это всего лишь несколько строк кода, я не могу понять, что я делаю здесь неправильно

Я уже пробовал в коде с использованием strokeStyle и без использования окна просмотра, я также пытался использовать var canvas = document.getElementById("myCanvas");, как это, с двойными кавычками

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

ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, 40, 40);

<canvas id="myCanvas" style="border: 1px solid black; height: 50px; width: 100vw; max-width: 100%;"></canvas>

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

Answer 1

Вы рисуете белый прямоугольник на белом холсте.

Измените ctx.fillStyle = "rgb(255, 255, 255)"; на цвет, отображаемый на белом фоне:

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

ctx.fillStyle = "rgb(255, 0, 0)";
ctx.fillRect(0, 0, 40, 40);

<canvas id="myCanvas" style="border: 1px solid black; height: 50px; width: 100vw; max-width: 100%;"></canvas>