Hola amigos lo logro cerrar un camino mediante el comando closePath(), tengo este código:
La idea es que al pulsar el boton de completar trazado, se llame a la funcion cerrar camino y lo cierre y rellene del color indicado, pero no me cierra el camino. Algo curioso es que conforme voy pinxando el botón, el camino se va remarcando más, como si se rellenara pero solo el camino, no se si me explico.
Espero que puedan ayudarme, Muchas gracias.
<script type="text/javascript" language="javascript">
var ctx;
var WIDTH;
var HEIGHT;
var canvasMinX;
var canvasMaxX;
var canvasMinY;
var canvasMaxY;
var x = 0;
var y = 0;
var puntos = new Array();
$(document).ready(function(){
ctx = $('#miCanvas')[0].getContext("2d");
WIDTH = $("#miCanvas").width();
HEIGHT = $("#miCanvas").height();
canvasMinX = $("#miCanvas").offset().left;
canvasMaxX = canvasMinX + WIDTH;
canvasMinY = $("#miCanvas").offset().top;
canvasMaxY = canvasMinY + HEIGHT;
function cerrarCamino()
{
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#ddd";
ctx.fill();
}
function gestionCanvas(event)
{
var x_coord = event.pageX - canvasMinX;
var y_coord = event.pageY - canvasMinY;
longitud = puntos.length;
ctx.fillStyle = 'black';
ctx.fillRect(x_coord, y_coord, 3, 3);
puntos.push([x_coord, y_coord]);
if(puntos.length == 1)
{
ctx.beginPath();
}
else
{
ctx.moveTo(puntos[longitud-1][0], puntos[longitud-1][1]);
ctx.lineTo(x_coord, y_coord);
ctx.stroke();
}
}
$('#miCanvas').bind('click', function(event)
{
gestionCanvas(event);
});
$('#btnCerrar').click(function()
{
cerrarCamino();
});
});
</script>
<html>
<head></head>
<body>
<div id="wrapper">
<canvas id="miCanvas" width="600" height="400" style="border:1px solid black; margin:50px;"></canvas>
</div>
<div id="coordenadas"><h2>COORDENADAS:</h2></div>
<div id="puntos"><h2>PUNTOS:</h2></div>
<div id="botones">
<div class="boton" id="btnCerrar">COMPLETAR TRAZADO</div>
</div>
</body>
</html>
