En este momento, estoy renderizando un mapa una vez en un lienzo fuera de pantalla, que luego se copia en el lienzo principal en cada fotograma, por lo que no tengo que volver a renderizar cada objeto en mi mapa en cada fotograma, lo que se vuelve muy lento, mi lienzo fuera de pantalla necesita ser relativamente grande para adaptarse a todo el mapa, aunque todo el lienzo se copia en los canas normales en cada cuadro que tampoco es tan eficaz, entonces mi pregunta es; ¿Hay alguna forma de copiar solo una sección de un lienzo a otro lienzo, para que no tenga que copiar todo?
Puede drawImage la imagen de su lienzo:
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const offscreen = Object.assign( document.createElement("canvas"), { width: 2500, height: 2500 } ); makeNoise(offscreen.getContext("2d")); canvas.onmousemove = evt => { const x = evt.clientX - canvas.offsetLeft; const y = evt.clientY - canvas.offsetTop; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(offscreen, x - offscreen.width / 2, y - offscreen.height / 2); } // fills a context with noise, // we use it only to draw somehing on the offscreen canvas function makeNoise(ctx) { const img = new ImageData(ctx.canvas.width, ctx.canvas.height); const data = new Uint32Array(img.data.buffer); for (let i = 0; i<data.length; i++) { data[i] = Math.random() * 0xFFFFFF + 0xFF000000; } ctx.putImageData(img, 0, 0); } Use your mouse to move the offscreen canvas<br> <canvas><canvas>le permite extraer datos de imagen basados en una coordenada X/Y y un ancho y alto, y
putImageData(imageData, dx, dy)
le permite colocarlo en una coordenada X/Y.
O use drawImage , que le permite usar el lienzo existente como "entrada" directamente, y puede especificar X/Y y ancho/alto tanto para el origen como para el destino:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)