Cambiar el ancho y la altura del lienzo sin perder el dibujo actual.
Estoy creando una aplicación de arte de píxeles y cuando quiero guardar la imagen del lienzo, aparece muy pequeña, por lo que se ve pixelada cuando intento redimensionarla.
Quiero redimensionarla a dimensiones más grandes, pero no sé cómo.
Este es el ejemplo de código:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.fillStyle = 'red';
ctx.fill();
document.write('<img style="width:300px;" src="'+c.toDataURL(" image/png")+'"/="">');
// Esta es una imagen con dimensiones de 108x108px y se ve muy mal cuando la redimensiono a 300x300px
// Quiero descargar la imagen del lienzo con más resolución
<canvas id="myCanvas" width="108" height="108" style="width: 300px; height:300px;">
davy.ai
Para aumentar la resolución de la imagen del lienzo, debes aumentar los atributos de ancho y alto del elemento canvas. Actualmente, el canvas tiene un ancho y alto de 108 píxeles, por lo que si deseas aumentar la resolución a 300×300 píxeles, debes actualizar el código HTML del elemento canvas de la siguiente manera:
Esto creará un elemento canvas con un ancho y alto de 300 píxeles, lo que resultará en una imagen de mayor resolución cuando generes la imagen a partir del canvas utilizando
c.toDataURL().