Create.Js, Jquery y otras librerías
Otras librerías como GSAP de greensock.com y TypeScript de Microsoft
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>1f3</title>
<style>
body {
background: #f8f8f8;
font-family: serif;
font-size: 20px;
}
#game {
display: block;
width: 400px;
height: 400px;
border: 1px solid #ddd;
margin: 10% auto 0 auto;
}
</style>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
var stage;
function init()
{
var saludo;
var dimension;
stage = new createjs.Stage('gameCanvas');
// Selector jquery
saludo = new createjs.Text($('h1').text(), "20px Arial", "black");
saludo.textBaseline = "alphabetic";
dimensiones = saludo.getBounds();
saludo.x = stage.canvas.width/2 - dimensiones.width/2;
saludo.y = stage.canvas.height/2 - dimensiones.height/2;
saludo.addEventListener("click", onBallClicked);
stage.addChild(saludo);
stage.update();
}
function onBallClicked(event)
{
console.log('Mensaje en Consola');
}
</script>
</head>
<body>
<h1>Selector Jquery dentro de un canvas</h1>
<div id="game">
<canvas id="gameCanvas" width="400px" height="400px">
Contenido Alternativo sin soporte para canvas.
</canvas>
</div>
</body>
</html>