Канвас - это элемент, на котором можно что-то такое нарисовать с помощью специальных функций.Особенность канваса в том, что рисовать в нем можно в пределах, которые определены в его атрибутах width и height. Если размещать канвас только с помощью стилей, как это принято у обычных элементов, будет странно выглядеть и непонятно рисовать.
А еще увеличивать его нужно с серьезным геморроем... А в остальном - обычный элемент. Чтобы поместить его ПОД таблицу, нужно поместить таблицу в объемлющий элемент, сделать этот элемент position:relative, сделать таблице position:relative, указать z-индексы, чтобы канвас оказался под таблицей и вставить канвас. Тонкость в том, что размеры таблицы, вообще говоря, неизвестны, их нужно вычислять сразу после размещения на страничке, так что вставку разумно делать в таймауте.
Собственно рисование просто и описано в документации, а вот вычисление габаритов кнопок разумнее сделать на jQuery, просто чтобы поменьше писать самому.
Что-то вроде вот такого...
http://jsbin.com/xobonef/edit?html,css,js,output
Интересно смотреть что получается, если размеры экрана по ширине подвигать.
Если какие буквы и слова непонятны - можно спрашивать...