В canvas могут быть вставлены изображения и отображен произвольный текст.

Текст

Метод fillText("текст",x,y) позволяет отображать в элементе canvas произвольный текст.

var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillText("Теперь Вы можете отображать", 15, 40);  
x.fillText("произвольный текст", 100, 70); 
x.fillText("в элементе canvas.", 60, 120);

Текст отображаемый в canvas может быть оформлен с помощью свойства font.

var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.font='15px Verdana';
x.fillStyle='#60016d';
x.fillText("Теперь Вы можете отображать", 10, 40);  
x.font='25px Arial';
x.fillStyle='#007439';
x.fillText("произвольный текст", 10, 80);
x.fillStyle='#a67800'; 
x.font='20px Comic Sans MS';
x.fillText("в элементе canvas.", 50, 120);

Вставка изображений

В canvas могут быть вставлены изображения форматов PNG, GIF и JPEG.

Для того, чтобы вставить изображение необходимо:

1. Создать ссылку на картинку находящуюся на странице;
2. Нарисовать ее на холсте с помощью метода drawImage('ссылка на картинку',x,y).

Создать ссылку на картинку из скриптов можно с помощью метода document.getElementById (также можно использовать методы getElementsByTagName и images). Если Вы не хотите, чтобы картинка была отображена на странице можно ее просто скрыть с помощью CSS.

<img id='image1' src='mountimg.jpg' style='display:none;'/>
<canvas id='draw' width='400' height='300' style='border:1px solid'></canvas> 
<script>
//Ссылаемся на картинку
var img=document.getElementById('image1');
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.drawImage(img,10,10);
</script> 

Заключение

В этом учебнике мы рассмотрели новые возможности добавленные в HTML5.

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