Существует значительная разница между html5 / css3 и javascripted тегом canvas.
HTML5 / CSS3
В этом случае вы просто используете обновленные теги для представления контента, модифицированного некоторыми изящными свойствами CSS. Затем вы будете использовать «стандартные» js (и js frameworks) для управления игровой логикой и определения пользовательских взаимодействий и анимаций (или использовать переходы CSS3 для управления любой анимацией).
Как известно, для создания пары прямоугольников:
div#red{
background-color:red;
height:50px;
width:50px;
position:relative;
}
div#blue{
background-color:blue;
height:50px;
width:50px;
position:relative;
}
<div id="red"></div>
<div id="blue"></div>
Если вы хотите создать этот (излишне) HTML5, они могут быть section с вместо div с. CSS3 определенно дает вам много хороших новых функций презентации, в частности такие вещи, как box-shadow.
Canvas
Это принципиально другой способ работы - гораздо ближе к чему-то вроде Flash / Actionscript, где контент и презентация определяются программно, через javascript. Например, вот как вы должны создать похожую пару прямоугольников:
var canvas = document.getElementById("canvas");
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
Аналогичным образом определяются игровая логика и взаимодействие с пользователем. Гибкость и мощь этого более позднего примера невозможно переоценить.
Я говорю все это просто, чтобы проиллюстрировать фундаментальное различие в этих двух технологиях. Теперь, ЕСЛИ вы можете делать все, что вы хотите делать с поведением разметки, CSS и JavaScript, а затем делать это любыми способами. В этом нет ничего плохого.
Работа с тэгом canvas, с другой стороны, может дать вам повышенную гибкость и контроль над проектом, позволяя, например, гораздо более сложные и детализированные анимации и взаимодействия .
Наконец, существуют проблемы с обоими этими маршрутами, в частности, с поддержкой браузера. Если вы ориентируетесь только на новейшие браузеры, то я не уверен, что это имеет значение, но вернитесь на пару поколений назад, и поддержка быстро исчезнет.