Hola muy buenas tardes a todos, mi problematica es que tengo que mejorar el procesamiento que hay al momento de dibujar en el cavas, por ejemplo cuando hago un trazo rapido, en este caso es un circulo o remolino entonces pasa que lo pinta pero con el detalle que el trazo no esta tan circular si no que se ven trazos donde hay lineas rectas para formar el circulo.
Se puede observar que los trazos tiene lineas rectas al momento de finalizar el remolino y esa es mi duda si se puede mejorar esta parte o es algo que no se puede hacer, adjunto una imagen y el codigo de antemano gracias.
<html>
<head>
<style>
.drop-shadow {
margin:2em 20% 4em;
}
canvas {
border-style:solid;
border-color:#000000;
border-radius:5px;
border-width:1px;
}
</style>
<title>Paint con HTML5</title>
</head>
<body onload="prepareCanvas();">
<canvas id="canvasEjemplo" width="800" height="600"></canvas>
<br><input type="button" id="borrador" value="Borrar Todo" />
<script>
var miLienzo; // el canvas
var contexto; // el contexto
var canvasLimites; // los margenes del canvas
var flagPaint=false; // nos dice si pintar o no
var actualPos; // la posición actual donde hice click
function prepareCanvas(){
miLienzo=document.getElementById("canvasEjemplo");
contexto= miLienzo.getContext("2d"); // obtenemos el contexto ( dibujar en 2d)
canvasLimites=miLienzo.getBoundingClientRect(); // obtenemos los limites del canvas
miLienzo.addEventListener('mousedown',cambiarEstado,false);
miLienzo.addEventListener('mouseup',cambiarEstado,false);
miLienzo.addEventListener('mousemove',pintarLinea,false);
miLienzo.style.cursor="hand";
borrador=document.getElementById("borrador");
borrador.addEventListener('click',erase,false);
}
function cambiarEstado(){
flagPaint=!flagPaint;
actualPos=obtenerCoordenadas(event);
}
function pintarLinea(event){
if(flagPaint){
var coordenadas=obtenerCoordenadas(event);
contexto.beginPath(); // comenzamos a dibujar
contexto.moveTo(actualPos.x, actualPos.y); // ubicamos el cursor en la posicion (10,10)
contexto.lineTo(coordenadas.x,coordenadas.y);
actualPos={
x:coordenadas.x,
y:coordenadas.y
};
contexto.strokeStyle = "#000"; // color de la linea
contexto.stroke(); // dibujamos la linea
}
}
function obtenerCoordenadas(event){
var posX;
var posY;
if (event.pageX || event.pageY) {
posX = event.pageX- canvasLimites.left;
posY = event.pageY- canvasLimites.top;
}else{
posX = event.clientX - canvasLimites.left;
posY = event.clientY - canvasLimites.top;
}
return {x:posX,
y:posY
};
}
function erase(){
contexto.clearRect(0, 0, miLienzo.width, miLienzo.height);
}
</script>
</body>
</html>