Estoy tratando de dibujar muchas imágenes en un lienzo (como 2000). Quiero repetir esta operación al menos 8-10 veces (en diferentes lienzos). He tratando de comparar mi código:
const CANVAS_SIZE = 281; const getRandom = (min, max) => Math.random() * (max - min) + min; const generateCoordinates = (n) => { const coordinates = []; for (let i = 0; i < n; i++) { const x = getRandom(0, CANVAS_SIZE); const y = getRandom(0, CANVAS_SIZE); coordinates.push([x, y]); } return coordinates; }; const benchmark = (n, draw) => { const img = new Image(); img.src = "svg.svg"; const coordinates = generateCoordinates(n); const canvas = document.querySelector("#canvas"); const context = canvas.getContext("2d"); const t0 = performance.now(); for (let i = 0; i < coordinates.length; i++) { const [x, y] = coordinates[i]; context.drawImage(img, x, y); } const t1 = performance.now(); return (t1 - t0) / 1000; };Pero el problema es que aunque devuelve muy pocos milisegundos, la imagen final tarda en cargarse. No sé por qué sucede esto. He estado leyendo y puede ser el tiempo de carga de la imagen, pero eso no tiene sentido porque estoy ejecutando ese código en local con:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas</title> </head> <script src="index.js"></script> <style> .canvas { border: 1px solid red; margin: auto; } .canvas-wrapper { border: 1px solid green; display: flex; } </style> <body> <div class="canvas-wrapper"> <canvas class="canvas" id="canvas" width="281" height="281"></canvas> </div> </body> </html>Y el archivo svg adjunto. ¿Alguien sabe como acelerarlo? También he intentado usar un lienzo fuera de pantalla pero no he podido hacerlo funcionar.