3

Al mover el hacia cualquier lado, el canvas deja de funcionar, me gustaría saber como moverlo de forma correcta hacia el margen derecho de la pantalla

HTML

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>plantillapaint</title>
    <meta name="description" content="">
    <meta name="author" content="satur">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->

    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="stylesheet" href="combinandoto.css">
    <script src="combinandoto.js"></script>

</head>
<body>
    <div id="paint">
        <table>
            <tr>
                <td><canvas width="500" height="500" id="canvas" onmousemove="pintar(event);" onmousedown="activar();" onmouseup="desactivar();"></canvas></td>
                <td class="herramientas">
                    <a href="#" onclick="lapiz();"><img src="Fotos/lapiz.png" width="50" height="auto" /></a>
                    <a href="#" onclick="borrador();"><img src="Fotos/goma.png" width="50" height="auto"/></a> <br>
                    <div style="width: 10px; height: 10px;" onclick="stamano(3);"></div><br />
                    <div style="width: 20px; height: 20px;" onclick="stamano(5);"></div><br />
                    <div style="width: 30px; height: 30px;" onclick="stamano(10);"></div><br />
                    <div style="width: 40px; height: 40px;" onclick="stamano(20);"></div><br />
                    <input type="color" id="colores" onchange="scolor();"/>
                    <a href="#" download="canvas.png" id="guardarimagen" >Guardar como imagen</a>
                </td>
            </tr>
        </table>
    </div>
    <script>
        document.getElementById("guardarimagen").addEventListener("click", guardari, false);

    </script>
</body>

CSS:

#paint {
   margin-left: 500px;
  }

#canvas {
    border : solid 1px;
    cursor : url('imagenes_del_rancio/lapizcursor.gif'), default;

}
.herramientas {
    width: 100px;
}
.herramientas div {
    background-color: black;
}
.herramientas div:hover{
    border: solid red 1px;
}
.herramientas img:hover{
    border: solid red 1px;
}

JAVASCRIPT:

var color = "#000000";
var tamaño = 10;
var pintura = false;

function pintar(event){
    var canvas = document.getElementById("canvas");
    var cuadro = canvas.getContext("2d");
    var x = event.clientX-15;
    var y = event.clientY+35;

    if(pintura){
        cuadro.fillStyle = color;
        cuadro.fillRect(x, y, tamaño, tamaño);
    }
}

function activar(){
    pintura = true;
}

function desactivar(){
    pintura = false;
}

function borrador(){

    document.getElementById("canvas").style.cursor = "url('imagenes_del_rancio/borradorcursor.png'), crosshair";
    color="#FFFFFF";
    document.getElementById("colores").setAttribute("disabled", "");
}

function lapiz(){
    document.getElementById("canvas").style.cursor = "url('imagenes_del_rancio/lapizcursor.gif'), crosshair";
    color = document.getElementById("colores").value;
    document.getElementById("colores").removeAttribute("disabled");
}

function scolor(){
    color = document.getElementById("colores").value;
}
function stamano (numero)
{
    tamaño = numero;
}
function guardari()
{
var canvas = document.getElementById("canvas");
var imagen = canvas.toDataURL("image/png");
this.href = imagen;
}

introducir la descripción de la imagen aquí

9
  • el html no salio, lo adjunto por aca <div id="paint"> <table> <tr> <td><canvas width="500" height="500" id="canvas" onmousemove="pintar(event);" onmousedown="activar();" onmouseup="desactivar();"></canvas></td>
    – lucasczuma
    el 4 abr. 2019 a las 17:27
  • No entiendo cual es el probema. Solo quieres mover el canvas y que el cuadrado quede contra el lado derecho? el 4 abr. 2019 a las 18:30
  • claro, cuando muevo el div que contiene el canvas al lado derecho, el canvas dejar de funcionar
    – lucasczuma
    el 4 abr. 2019 a las 18:35
  • Y que problemas te muestra, nos cuestra ayudarte con tan poca info. Trata de tomarte tu tiempo y agregar toda la info a la pregunta. el 4 abr. 2019 a las 18:37
  • el problema es que al mover el <div> donde se encuentra el canvas, el cuadro de dibujo deja de funcionar. Internamente el canvas se debe estar quedando en su posición inicial y solo se mueve el cuadro, por lo que están quedando desfasados. quiero unirlos
    – lucasczuma
    el 4 abr. 2019 a las 18:40

2 respuestas 2

1

El problema es el clientX y el clientY. Ambos toman el valor de la pantalla y la pos en la que esta el cursor. Es decir que cuando tu canvas esta a la derecha toma la coordenada desfasada. Para eso tiene que restar la propia posición del canvas a tu coordenada x,y:

var rect = canvas.getBoundingClientRect();

var  x= event.clientX - rect.left;
var  y= event.clientY - rect.top;

Luego el resto fue cambiar de lugar el td para q el canvas se vea a la derecha.


  var color = "#000000";
  var tamaño = 10;
  var pintura = false;
  

        
  function pintar(event) { 
    var canvas = document.getElementById("canvas");
    var cuadro = canvas.getContext("2d");
    var rect = canvas.getBoundingClientRect();

    var  x= event.clientX - rect.left;
    var  y= event.clientY - rect.top;
    // var x = event.clientX - rect.left;
    // var y = event.clientY - rect.top;

    if (pintura) {
      cuadro.fillStyle = color;
      cuadro.fillRect(x, y, tamaño, tamaño);
    }
  }

  function activar() {
    pintura = true;
  }

  function desactivar() {
    pintura = false;
  }

  function borrador() {

    document.getElementById("canvas").style.cursor = "url('imagenes_del_rancio/borradorcursor.png'), crosshair";
    color = "#FFFFFF";
    document.getElementById("colores").setAttribute("disabled", "");
  }

  function lapiz() {
    document.getElementById("canvas").style.cursor = "url('imagenes_del_rancio/lapizcursor.gif'), crosshair";
    color = document.getElementById("colores").value;
    document.getElementById("colores").removeAttribute("disabled");
  }

  function scolor() {
    color = document.getElementById("colores").value;
  }

  function stamano(numero) {
    tamaño = numero;
  }

  function guardari() {
    var canvas = document.getElementById("canvas");
    var imagen = canvas.toDataURL("image/png");
    this.href = imagen;
  }
  #paint {
    margin - left: 500 px;
  }
  #paint table{
    float:right;
  }
  #canvas {
    border: solid 1px black;
    cursor: url('imagenes_del_rancio/lapizcursor.gif'),
      default;
  }

  .herramientas {
    width: 100 px;
  }

  .herramientas div {
    background - color: black;
  }

  .herramientas div: hover {
    border: solid red 1 px;
  }

  .herramientas img: hover {
    border: solid red 1 px;
  }
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>plantillapaint</title>
<meta name="description" content="">
<meta name="author" content="satur">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="combinandoto.css">
<script src="combinandoto.js"></script>

</head>

<body>
  <div id="paint">
    <table>
      <tr>
        <td class="herramientas"> 
          <a href="#" onclick="lapiz();"><img src="Fotos/lapiz.png" width="50" height="auto" /></a>
          <a href="#" onclick="borrador();"><img src="Fotos/goma.png" width="50" height="auto" /></a> <br>
          <div style="width: 10px; height: 10px;" onclick="stamano(3);"></div><br />
          <div style="width: 20px; height: 20px;" onclick="stamano(5);"></div><br />
          <div style="width: 30px; height: 30px;" onclick="stamano(10);"></div><br />
          <div style="width: 40px; height: 40px;" onclick="stamano(20);"></div><br />
          <input type="color" id="colores" onchange="scolor();" />
          <a href="#" download="canvas.png" id="guardarimagen">Guardar como imagen</a>
        </td>
        <td>
          <canvas width="500" height="500" id="canvas" onmousemove="pintar(event);" onmousedown="activar();" onmouseup="desactivar();"></canvas>
        </td>
      </tr>
    </table>
  </div>
  <script>
    document.getElementById("guardarimagen").addEventListener("click", guardari, false);
  </script>
</body>

Te adjunto una respuesta de SO desde la q me base para responderte y que tiene unos ejemplos muy buenos.


2
  • 1
    muchas gracias bianco, la respuesta fue muy precisa y me diste una muy buena fuente!
    – lucasczuma
    el 4 abr. 2019 a las 19:46
  • De nada, me alegra poder ayudarte. Cualquier cosa, no dudes en preguntar. Saludos el 4 abr. 2019 a las 19:47
-1

puedes tratar el div como absoluto y moverlo con top,bottom,left, o right seria ponerle lo sig a #paint

#paint {
  position: absolute;
  top: 0;
  right: 0;
}

canvas {
  border: solid 1px;
  cursor: url('imagenes_del_rancio/lapizcursor.gif'), default;
}
<div id="paint">
  <table>
    <tr>
      <td>
        <canvas width="500" height="500" id="canvas"">
                    </canvas>
      </td>
    </tr>
  </table>
</div>

4
  • sigo sin poder dibujar en el canvas al moverlo
    – lucasczuma
    el 4 abr. 2019 a las 17:49
  • Entonces tu problema es que no puedes dibujar en el canvas al moverlo? el 4 abr. 2019 a las 17:50
  • efectivamente, ese es el problema
    – lucasczuma
    el 4 abr. 2019 a las 18:37
  • entonces, explicalo bien por que tu estas redactando otro problema, ese ya es problema con javascript al parecer, deberias mostrar todo el codigo completo el 4 abr. 2019 a las 18:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.