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:
Y con el código jQuery que he escrito, al redimensionar la pantalla, la imagen contenida en el canvas se deforma:
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>