<canvas>

Тег <canvas> добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео.

        
          
          <canvas width="300" height="300"></canvas>
          <canvas width="300" height="300"></canvas>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На случай, если браузер не поддерживает тег или у пользователя выключен JavaScript, можно добавить альтернативный контент:

        
          
          <canvas width="300" height="300">  <p>    Альтернативный контент для старых браузеров и для тех у кого выключен JavaScript.  </p></canvas>
          <canvas width="300" height="300">
  <p>
    Альтернативный контент для старых браузеров и для тех у кого выключен JavaScript.
  </p>
</canvas>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Однако все современные браузеры поддерживают тег <canvas>, так что альтернативный контент скорее пригодится для тех пользователей, которые сознательно отключают JavaScript или для тех кто не может увидеть то, что вы отображаете на <canvas>. Например, мы можем нарисовать на холсте невероятно крутую анимацию прогноза погоды, однако для пользователей со скринридерами мы оставим внутри тега доступную для них информацию:

        
          
          <canvas id="weather-screen" width="300" height="300">  <h1>Прогноз погоды в Н-ске на 4 мая 2022 года</h1>  <p>    Погода ожидается малооблачная с кучевыми облаками и прохладная. Вероятность    осадков 50%. Атмосферное давление в пределах нормы (758–759 мм рт. ст.).    Температура воздуха +15…+16°C. Ветер слабый (1 м/с). Относительная влажность    67–70%.  </p></canvas>
          <canvas id="weather-screen" width="300" height="300">
  <h1>Прогноз погоды в Н-ске на 4 мая 2022 года</h1>
  <p>
    Погода ожидается малооблачная с кучевыми облаками и прохладная. Вероятность
    осадков 50%. Атмосферное давление в пределах нормы (758–759 мм рт. ст.).
    Температура воздуха +15…+16°C. Ветер слабый (1 м/с). Относительная влажность
    67–70%.
  </p>
</canvas>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Важно понять, что даже если альтернативный контент визуально не отображается на странице, то он всё ещё присутствует в DOM и доступен для вспомогательных технологий. Это является отличным инструментом для создания, например, доступных графиков. Однако поместив в альтернативный контент интерактивный элемент (кнопку, ссылку и т.д.) разработчик может неосознанно внести путаницу для пользователя, так как этот элемент будет доступен с клавиатуры, но при этом пользователь не увидит ни элемента ни индикатора фокуса. Если разработчик помещает интерактивный элемент в зону альтернативного контента, то он должен предусмотреть то, как будет вести себя фокус на странице при перемещении между элементами.

Тег <canvas> парный и обязательно требует закрывающего тега, иначе весь контент после будет расценён браузером как фолбэк.

В качестве альтернативного контента можно разместить любые другие теги. Единственное, важно понимать, что ваш альтернативный контент должен отображаться в случае отключённого JavaScript.

Атрибуты width и height не обязательные. По умолчанию, если не указать размеры, браузеры создадут холст размером 300 на 150 пикселей.

К тегу можно применить все глобальные атрибуты.

Тег <canvas> сам по себе не несёт никакого смысла. Это просто холст для отрисовки растровой графики. Но он предоставляет нам доступ к Canvas API и WebGL API в JavaScript. С помощью этих API вы можете получить доступ к каждому отдельному пикселю в пределах холста и управлять его цветом в отдельности от других пикселей.

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

Пример использования Canvas API:

Пример использования WebGL API: