El problema es que probé con addEventListener y no puedo porque no retorna un valor.
Les muestro mi código para que entiendan mejor xD.
También estoy aprendiendo js xD lo que si no quiero usar es jquery ni nada por el estilo, prefiero usar todo código mio... aunque me lleve mas dolores de cabeza je.
Saludos
el html
Código:
<html>
<head>
<title>Paint con HTML5</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="ObjCanvas.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600">
</canvas><br>
<input type="button" id="cuadrado" value="cuadrado" onclick="seleccion(this.value)"/>
<input type="button" id="linea" value="linea" onclick="seleccion(this.value)"/>
<input type="button" id="ovalo" value="ovalo" onclick="seleccion(this.value)"/>
<input type="button" id="borrador" value="Borrar Todo" onclick="seleccion(this.value)" />
</body>
</html>
El js
Código:
document.addEventListener("DOMContentLoaded", iniciar, false);
function iniciar(){
var canvas = document.getElementById("canvas");
contexto = canvas.getContext("2d");
}
function ObtenerCoords(event){
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined){
x = event.x;
y = event.y;
}else{// Firefox
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
var result=x+","+y;
return result;
}
function seleccion(value){
switch(value)
{
case "linea":
linea();
break;
case "cuadrado":
cuadrado();
break;
default:
selec();
}
}
function linea() {
var coors;
contexto.strokeStyle = "rgb(200,200,200)";
contexto.beginPath();
coors= contexto.addEventListener('mousedown', ObtenerCoords, false);
contexto.moveTo(coor);
coors= contexto.addEventListener('mouseup', ObtenerCoords, false);
contexto.lineTo(coor);
contexto.stroke();
}
function cuadrado() {
contexto.fillStyle = "rgb(41,155,243)";
contexto.fillRect (10, 10, 180, 180);
}
