| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <title>Composited canvases with internal animation</title> |
| </head> |
| <body> |
| <script> |
| var size = 2048; |
| var numCanvases = 2; |
| var canvas = new Array(); |
| var squareSize = size / numCanvases; |
| for (i = 0; i < numCanvases; i++) { |
| var c = document.createElement("canvas"); |
| c.width = c.height = size; |
| c.style.left = c.style.top = "0px"; |
| c.style.position = "absolute"; |
| document.body.appendChild(c); |
| canvas[i] = c; |
| } |
| |
| function redraw() { |
| var i; |
| for (i = 0; i < numCanvases; i++) { |
| var c = canvas[i]; |
| var ctx = c.getContext("2d"); |
| ctx.fillStyle = "rgba(1, 1, 1, 0.01)"; |
| ctx.fillRect(0, 0, size, size); |
| ctx.fillStyle = "rgba(0, 255, 0, 0.5)"; |
| ctx.fillRect(Math.random() * c.width, Math.random() * c.height, squareSize, squareSize); |
| } |
| window.setTimeout(redraw, 1); |
| } |
| window.setTimeout(redraw, 1); |
| </script> |
| <canvas height="2048" width="2048" style="top: 0px; left: 0px; position: absolute;"></canvas><canvas height="2048" width="2048" style="top: 0px; left: 0px; position: absolute;"></canvas> |
| </body> |
| </html> |
