El objetivo principal de canvas-event es el manejo de eventos en el elemento canvas, además de reducir la cantidad de lineas necesarias para crear una aplicación.
// API nativa canvas
//===================
var cv = document.getElementById("canvas"),
ctx = cv.getContext("2d");
// dibujar circulo rojo
ctx.save();
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(50, 50, 30, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
ctx.restore();
// Ejemplo canvas-event
//======================
var ce = Cevent("canvas");
ce.circle(50, 50, 30).attr("fill", "red").draw();
Muchas de las características de canvas-event como el encadenado de métodos y manejo de eventos fueron inspiradas en jQuery lo cual facilita su aprendizaje a personas familiarizadas con este framework.
canvas-event funciona en todos los navegadores modernos con soporte html5. Los únicos requisitos son:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
#canvas { position: relative; }
</style>
</head>
<body>
<canvas id="canvas" ></canvas>
<!-- scripts canvas-event-js -->
<script src="js/Class.js" type="text/javascript" ></script>
<script src="js/events.js" type="text/javascript" ></script>
<script src="js/Shape.js" type="text/javascript" ></script>
<script type="text/javascript" >
// crear instancia canvas-event
ce = Cevent("canvas");
...
...
</script>
</body>
</html>