Почему не меняются размеры canvas-а через js?

Описание

Есть у меня стандартный canvas:

...которому в html/css не дал размеров. Размеры даю через js, при открытии проекта, чтобы подгонять по размерам экрана, вот так:

document.getElementById("canvas_program").style.width = Program.sizePixels;
document.getElementById("canvas_program").style.height = Program.sizePixels;

...где Program.sizePixels определяется вот так:

class Program
{
    static sizePixels = Math.min
    (
        document.documentElement.clientWidth - 70,
        document.documentElement.clientHeight - 150
    );
}

У меня оно равно 475. Но canvas даже так не реагирует.

document.getElementById("canvas_program").style.width = 475;
document.getElementById("canvas_program").style.height = 475;

Но если к примеру менять другие параметры в том же скрипте, к примеру:

document.getElementById("canvas_program").style.display = "none";

то всё сработает отлично:


Вопрос

Почему размеры не меняются и как это исправить?


Ответы (1 шт):

Автор решения: Qwertiy
  1. В style размеры надо писать с px
  2. В style размеры только для стилей, размеры холста задаются в атрибутах, а из скрипта - в свойствах.
canvas.width = 475
canvas.style.width = "950px"
→ Ссылка