2

Creando un canvas, quiero que siempre ocupe el total de la pantalla. Estoy intentando que al redimensionar la ventana el canvas se ajuste automáticamente, pero sin modificar la dimensión del contenido gráfico que contiene.

Para que ocupe el completo de la pantalla al redimensionar estoy usando jQuery:

$(window).resize(function () {
   $("#myCanvas").css({ "width": "100%", "height": "100%" });
});

Con esta forma el contenido del canvas se amplia, y no es eso lo que busco. En las siguientes imagenes muestro lo que quiero evitar. Por un lado, tenemos una imagen cualquiera:

Imagen en pantalla con dimension pequeña

Y con el código jQuery que he escrito, al redimensionar la pantalla, la imagen contenida en el canvas se deforma:

Imagen modificada

He añadido el canvas a un div con la intención de darle contexto de que el canvas utilice la dimensión del div al que pertenece, y modificar con jQuery la dimensión no del canvas, sino del div, pero de está manera no se amplia la zona de pintado del canvas. ¿Conocéis alguna manera de actualizar la dimensión del lienzo sin alterar el contenido gráfico ya existente? En el ejemplo anterior dibujo un circulo, pero podría ser cualquier elemento gráfico, conocido o no, por lo que recargar el canvas con el nuevo tamaña y redibujar el componte gráfico no es la solución que estoy buscando. En el siguiente código dejo el ejemplo de usar el canvas como una pizarra en la que poder dibujar al pinchar y mover el mouse, como si fuera un "paint".

Os dejo el código que estoy usando para las pruebas:

 $(window).resize(function () {
        $("#myCanvas").css({ "width": "100%", "height": "100%" });
    });

 var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        ctx.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
         var mouse = { x: 0, y: 0 };

    canvas.addEventListener('mousemove', function (e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
    }, false);
 ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
canvas.addEventListener('mousedown', function (e) {
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);

        canvas.addEventListener('mousemove', onPaint, false);
    }, false);

    canvas.addEventListener('mouseup', function () {
        canvas.removeEventListener('mousemove', onPaint, false);
    }, false);

    var onPaint = function () {
        ctx.lineTo(mouse.x, mouse.y);
        ctx.stroke();
    };
 body,
 html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
        <canvas id="myCanvas"></canvas>
    </div>

2
  • Utiliza el scale para que sea proporcional al tamaño de página y no se te deforme.
    – solamente
    Commented el 19 feb. 2019 a las 15:32
  • Modificar el tamaño del canvas siempre borra lo que tengas dibujado. Podrías capturar la imagen y luego pegarla de nuevo, pero sigue siendo redibujarla en cualquier caso. Commented el 19 feb. 2019 a las 16:30

1 respuesta 1

4

No lo hagas en CSS. Cambia el tamaño del canvas en JavaScript. Para establecer el tamaño del canvas igual al tamaño de las ventana utilizo c.width = window.innerWidth; c.height = window.innerHeight;. En el código he dejado lo que tu tenías.

Prácticamente lo que hay que hacer es redibujar todo en el canvas on resize. Pero atención: el evento resize se dispara con gran frequencia así que es mejor hacerlo en un setInterval

var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
       /* 
        c.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        c.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();*/


function Init(){
// recalcula el tamaño del canvas
        c.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        c.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
        // limpia el canvas
        ctx.clearRect(0,0,c.width,c.height);
        // vuelve a dibujar todo
        ctx.beginPath();
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.stroke();
}


window.setTimeout(function() {
  Init();

  window.addEventListener('resize', Init, false);
}, 15);
body,
 html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100vh;
}

canvas{background:silver}
<div id="container">
        <canvas id="myCanvas"></canvas>
    </div>

Actualización

El OP ha añadido su código. Resulta que quiere crear un programa donde los usuarios puedan dibujar algo.

He modificado el código. Al dibujar en el canvas cada punto es guardado en un array de arrays. al mover el ratón en el canvas, primero limpio el canvas con clearRect y después vuelvo a dibujar todo de nuevo.

//un boleano utilizado para dibujar solo después de haver hecho clic en el canvas
let dibujamos = false;
// el array de los puntos utilizado para dibujar todo de nuevo
let puntos = [];
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.lineJoin = "round";
ctx.lineCap = "round";

let mouse = { x: 0, y: 0 };

canvas.addEventListener(
  "mousedown",
  function(e) {
    dibujamos = true;
    mouse = oMousePos(canvas, e);
    puntos.push([]);
  },
  false
);

canvas.addEventListener(
  "mousemove",
  e => {
    if (dibujamos) {
      mouse = oMousePos(canvas, e);
      puntos[puntos.length - 1].push({ x: mouse.x, y: mouse.y });
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      dibujar(puntos);
    }
  },
  false
);

canvas.addEventListener(
  "mouseup",
  function() {
    dibujamos = false;
  },
  false
);

function Init() {
  // recalcula el tamaño del canvas
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // limpia el canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // vuelve a dibujar todo
  dibujar(puntos);
}


// utiliza el array de puntos para dibujar de nuevo los trazados
function dibujar(puntos) {
  puntos.forEach(ry => {
    ctx.beginPath();
    ctx.moveTo(ry[0].x, ry[0].y);
    ry.forEach(p => {
      ctx.lineTo(p.x, p.y);
    });
    ctx.stroke();
  });
}


window.setTimeout(function() {
  Init();
  window.addEventListener("resize", Init, false);
}, 15);


// una función para detectar la posición del ratón en el canvas
function oMousePos(canvas, evt) {
  let ClientRect = canvas.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}
*{margin:0;padding:0}
canvas{background:#d9d9d9;}
<canvas id="myCanvas"></canvas>

Si después de todo esto sigues interesado en detectar saber como detectar la posición del ratón en un canvas redimensionado con css esto podría ayudar: La posición del ratón

5
  • 1
    Gracias por responder. Creo que he formulado mal la pregunto porque he dejado fuera datos. Los gráficos que existen en el canvas, en este ejemplo el circulo, no tienen porque ser forzosamente conocidos, por lo que tu solución, aunque válida, no es la que soluciona el problema. Voy a editar la entrada. De nuevo, muchas gracias.
    – mperez
    Commented el 19 feb. 2019 a las 15:48
  • 1
    A veces en lugar de tu circulo hay un array (o varios) de elementos. La solución es borrarlo todo, recalcular la posición de los elementos y volver a dibujarlos. Por ejemplo en este pen hay un montón de partículas con una animación compleja. Al redimensionar la pantalla la función init() se encarga de recalcular la altura y la anchura del canvas, parar la animación y volver a dibujarlo todo.
    – enxaneta
    Commented el 19 feb. 2019 a las 16:57
  • 1
    Este otro es un ejemplo mucho más sencillo donde onresize primero estoy vaciando el array de las partículas, vuelvo a popular el array de las partículas, y después vuelvo a dibujarlas y animarlas. En el caso en el cual esto no es lo que necesitas edita tu pregunta y pon un ejemplo funcional en el cual dibujas algo en el canvas, para que alguien pueda explicarte que hay que hacer en un caso en concreto. Me gustaría ayudar.
    – enxaneta
    Commented el 19 feb. 2019 a las 17:01
  • Muchas gracias por tu ayuda, de verdad. Voy a añadir código para que sea más claro mi ejemplo.
    – mperez
    Commented el 20 feb. 2019 a las 7:07
  • He actualizado mi respuesta en base al código añadido. Por favor échale una mirada.
    – enxaneta
    Commented el 22 feb. 2019 a las 14:26

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.