canvas | Как изменить размер холста?

canvas | Как изменить размер холста?

По умолчанию размер холста canvas равен 300 на 150 пикселей. В большинстве случаев этот размер никуда не подходит и есть 100% необходимость его изменить. Как это сделать?

За размеры холста canvas отвечают его HTML-атрибуты:

  • width — ширина (горизонтальный размер)
  • height — высота (вертикальный размер)

Если мы «ручками» создаём HTML-разметку элемента canvas, то мы должны создать запись, которая соответствует нужным нам размерам холста. Например:

<canvas width="1000" height="600"></canvas>

В браузере это будет выглядеть так:

Вручную создали элемент canvas размером 1000 на 600 пикселей
Вручную создали элемент canvas размером 1000 на 600 пикселей

 

Если мы используем JavaScript, то мы создаём новый объект холста canvas и уже потом присваиваем нужные значения свойствам width и height.

<!DOCTYPE html>

<html lang=«ru»>

<head>

    <meta charset=«UTF-8»>

    <meta http-equiv=«X-UA-Compatible» content=«IE=edge»>

    <meta name=«viewport» content=«width=device-width, initial-scale=1.0»>

    <title>Создали объект холста через JavaScript</title>

</head>

<body>

    <script>

        let my_canvas = document.createElement(‘canvas’);

        my_canvas.width = 1000;

        my_canvas.height = 600;

        document.body.append(my_canvas);

    </script>

</body>

</html>

 

Информационные ссылки

canvas | Размер холста по умолчанию

HTML | Элемент canvas

Стандарт HTML — Раздел «4.12.5 The canvas element» — https://html.spec.whatwg.org/multipage/canvas.html