1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 5 <title>Composited canvases with internal animation</title> 6</head> 7<body> 8<script> 9var size = 2048; 10var numCanvases = 2; 11var canvas = new Array(); 12var squareSize = size / numCanvases; 13for (i = 0; i < numCanvases; i++) { 14 var c = document.createElement("canvas"); 15 c.width = c.height = size; 16 c.style.left = c.style.top = "0px"; 17 c.style.position = "absolute"; 18 document.body.appendChild(c); 19 canvas[i] = c; 20} 21 22function redraw() { 23 var i; 24 for (i = 0; i < numCanvases; i++) { 25 var c = canvas[i]; 26 var ctx = c.getContext("2d"); 27 ctx.fillStyle = "rgba(1, 1, 1, 0.01)"; 28 ctx.fillRect(0, 0, size, size); 29 ctx.fillStyle = "rgba(0, 255, 0, 0.5)"; 30 ctx.fillRect(Math.random() * c.width, Math.random() * c.height, squareSize, squareSize); 31 } 32 window.setTimeout(redraw, 1); 33} 34window.setTimeout(redraw, 1); 35</script> 36<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> 37</body> 38</html>