He estado tratando de resolver este problema durante días. Simplifiqué el problema con este código simple:
let graphicCanvas let ctx let speed = 1 function setup(){ cnv = createCanvas(windowWidth, windowHeight) cnv.style('display', 'block'); graphicCanvas = createGraphics(800,800) ctx = graphicCanvas.canvas.getContext('2d') } function draw(){ ctx.drawImage(ctx.canvas,0,0,800,800,0,speed,800,800) graphicCanvas.noStroke() graphicCanvas.fill(255,0,0) graphicCanvas.circle(100,100,50) image(graphicCanvas,0,0) }Se supone que este código muestra los senderos, de un círculo rojo, que se alarga después de cada bucle: Senderos rojos
El problema es que este código solo funciona en pantallas grandes. Con pantallas pequeñas termino con este resultado: círculos rojos
No sé si el problema proviene de createGraphics() , drawImage() o image() .
Ya intenté usar graphicCanvas.push() y graphicCanvas.pop() pero nada cambió. ¿Cómo puedo obtener el resultado de "Rastros rojos" para cada tamaño de pantalla?
(Como extranjero, discúlpeme por los errores en inglés)
El problema no es el tamaño de la pantalla, sino la densidad de píxeles. Debido a que está utilizando la función CanvasRenderingContext2D.drawImage en lugar de la función p5.js , los gráficos en realidad se escalan 2x cuando se dibujan. Aquí hay un ejemplo que debería funcionar en cualquier pantalla:
let graphicCanvas; let ctx; let speed = 1; function setup() { pixelDensity(1); cnv = createCanvas(windowWidth, windowHeight); cnv.style("display", "block"); graphicCanvas = createGraphics(800, 800); ctx = graphicCanvas.canvas.getContext("2d"); } function draw() { ctx.drawImage(ctx.canvas, 0, 0, 800, 800, 0, speed, 800, 800); graphicCanvas.noStroke(); graphicCanvas.fill(255, 0, 0); graphicCanvas.circle(100, 100, 50); image(graphicCanvas, 0, 0); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> Dicho esto, es posible que desee considerar evitar las funciones nativas CanvasRenderingContext2D por completo y usar funciones p5.js que preservan la compatibilidad con la densidad de píxeles:
let graphicCanvas; let ctx; let speed = 1; function setup() { cnv = createCanvas(windowWidth, windowHeight); speed = pixelDensity(); cnv.style("display", "block"); graphicCanvas = createGraphics(800, 800); } function draw() { graphicCanvas.copy(0, 0, 800, 800, 0, speed, 800, 800); graphicCanvas.noStroke(); graphicCanvas.fill(255, 0, 0); graphicCanvas.circle(100, 100, 50); image(graphicCanvas, 0, 0); }