Actualmente estoy trabajando en un juego javascript de lienzo html, y está casi terminado, pero quiero escalar el lienzo para que todo el juego sea más grande. Intenté usar algo como
var imgData = ctx.getImageData(0, 0, 300, 500);
ctx.putImageData(imgData,0,0,0,0,360,600)
pero usando este método no pude aumentar el tamaño de la imagen. ¿Cuál es el mejor método para esto?
Hay varias formas de lograr esto, las dos con las que he experimentado usarían 2 lienzos separados, putImageData es un poco extraño y no funciona bien para escalar, lo que recomendaría es tener un lienzo separado, el tamaño de la versión ampliada y luego use ctx.drawImage para dibujar el primer lienzo en la versión ampliada:
var c = document.getElementById('c'); var ctx = c.getContext('2d'); var c2 = document.getElementById('c2'); var ctx2 = c2.getContext('2d') ctx.fillStyle = "red"; ctx.fillRect(10,10,100,100) var scaleX = c2.width / c.width; var scaleY = c2.height / c.height; ctx2.drawImage(c,0,0,c2.width,c2.height) canvas{ border: 2px solid black } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <canvas id="c" width="200" height="200"></canvas> <canvas id="c2" width="400" height="400" ></canvas> <script src="script.js"></script> </body> </html>La otra forma es simplemente escalar el contexto, luego dibujar la imagen en 0,0, sin especificar ancho ni alto:
var c = document.getElementById('c'); var ctx = c.getContext('2d'); var c2 = document.getElementById('c2'); var ctx2 = c2.getContext('2d') ctx.fillStyle = "red"; ctx.fillRect(10,10,100,100) var scaleX = c2.width / c.width; var scaleY = c2.height / c.height; ctx2.scale(scaleX,scaleY) ctx2.drawImage(c,0,0) ctx2.scale(1/scaleX,1/scaleY) canvas{ border: 2px solid black } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <canvas id="c" width="200" height="200"></canvas> <canvas id="c2" width="400" height="400" ></canvas> <script src="script.js"></script> </body> </html>Una opción más es usar la etiqueta css scale(), pero eso interfiere con los clics del mouse y es realmente molesto, así que no lo haría. Tenga en cuenta que todos los métodos que amplían el lienzo (a menos que aumente las coordenadas y vuelva a dibujar) darán como resultado un desenfoque.
Espero que esto ayude: D