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

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

Поделись записью