Рассмотренный ранее в постах пример приложения продемонстрировал один из возможных способов применения холста, налагаемого поверх графики. Однако возможно также применение холста поверх всего окна браузера или только какой-то его части. Соответствующая методика носит название прозрачной, или стеклянной, панели (glass pane). Размещение холста прозрачной панели поверх веб-страницы открывает перед разработчиком множество необычных, но чрезвычайно полезных возможностей.

Начнем с HTML-элементов, объявленных в этом примере. В данном случае в их число входят титульное название, элемент canvas и кнопка, которую можно использовать для сброса тепловой карты. В качестве фона холста используется простое изображение mapbg. jpg, применяемое к холсту посредством стилей CSS, как показано в листинге 1.

<style type="text/ess"> 
#heatmap {
	background-image: url("mapbg.jpg");
	border: lpx solid ; 
	height:300;
	width:300
}
</style>
<h2>Heatmap </h2>
<canvas id="heatmap" class="clear"> </canvas> 
<button id="resetButton">Reset</button>
Мы также инициализируем некоторые переменные, которые потребуются нам позже:
var points = {} ; var SCALE = 3; var x = -1 ; var у = -1 ;

Существует множество областей применения спецификации HTML5 Canvas: построение графиков и диаграмм, редактирование изображений и т.д. Однако одним из самых интригующих применений элемента canvas является изменение или наложение существующих изображений. К популярным типам наложения изображений относятся так называемые тепловые карты (heatmap). Хотя это название наводит на мысль о температурных измерениях, в данном случае под ним можно подразумевать измерение любого вида активности. Области карты, соответствующие высоким уровням активности, окрашиваются "горячими" цветами (например, красным, желтым или белым). Области меньшей активности характеризуются полным отсутствие цветовых изменений или оттенками черного и серого цветов минимальной интенсивности.

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

В отношении манипулирования пикселями, о чем говорилось в предыдущем разделе, необходимо сделать одно важное замечание. Хотя подобные манипуляции в большинстве случаев используются как вполне законное средство разработки, нельзя исключить того, что возможность извлечения данных из холста или внесения в него изменений может быть использована в злонамеренных целях. По этой причине было введено понятие чистоты происхождения (origin-clean) холста, а извлечение данных из холстов, загрязненных (tainted) изображениями, которые поступили от источников, отличных от источника самой страницы, сделано невозможным.

Одним из наиболее полезных аспектов программного интерфейса HTML5 Canvas является то, что с его помощью разработчики могут легко получать доступ к пикселям, образующим холст. Предоставляемый доступ является двусторонним в том смысле, что насколько тривиально получить доступ к значениям пикселей в виде числового массива, настолько же просто можно изменить эти значения и применить их к холсту. Фактически, вполне возможно манипулировать всем холстом исключительно посредством функций для работы с пикселями, полностью отказавшись от функций для построения графических объектов. Такая возможность связана с существованием у объекта context трех функций.