Estoy creando una aplicación de pixel art y cuando quiero guardar la imagen del lienzo, la imagen es tan pequeña que parece pixelada cuando quiero cambiar su tamaño.
Quiero cambiar el tamaño 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")+'"/>'); // This is an image with dimensions 108x108px and it seems very bad when i resize it to 300x300px // I want to download the canvas image with more resolution <canvas id="myCanvas" width="108" height="108" style="width: 300px; height:300px;"> </canvas>puede crear un lienzo y poner los datos de imagen en él.
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.rect(0, 0, 25, 25); ctx.fillStyle = 'red'; ctx.fill(); ctx.beginPath(); ctx.rect(0, 25, 25, 25); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.beginPath(); ctx.rect(25, 0, 25, 25); ctx.fillStyle = 'blue'; ctx.fill(); ctx.beginPath(); ctx.rect(25, 25, 25, 25); ctx.fillStyle = 'green'; ctx.fill(); var c2 = document.createElement("canvas"); c2.width = 50; c2.height = 50; var ctx2 = c2.getContext("2d"); var imageData = ctx.getImageData(0, 0, 50, 50); ctx2.putImageData(imageData, 0, 0); document.write('<img style="width:300px;" src="' + c2.toDataURL("image/png") + '"/>');