zxch3n/ChromeCanvasBug.html

## ChromeCanvasBug.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="1000px" height="1000px"></canvas>
    <script>
        let count = 0;
        function appendNew(){
            const canvas = document.createElement('canvas');
            nodes.push(canvas);
            canvas.width = 100;
            canvas.height = 100;
            const ctx = canvas.getContext('2d');
            const color = (count % 256).toString(16).padStart(2, 0);
            count++;
            ctx.fillStyle = '#' + color + color + color;
            ctx.fillRect(0, 0, 100, 100);
        };
        const nodes = [];
        for (let i = 0; i < 1000; i++) {
            appendNew();
        }

        const c = document.getElementById('canvas');
        const ctx = c.getContext('2d');
        function draw() {
            ctx.clearRect(0, 0, 1000, 1000);
            for (let i = 0; i < 10; i++) {
                for (let j = 0; j < 5; j++) {
                    const data = nodes[i * 10 + j].getContext('2d').getImageData(0, 0, 99, 99);
                    ctx.putImageData(data, i * 100 , j * 100)
                }

                appendNew();
            }

            for (let i = 0; i < 10; i++) {
                for (let j = 5; j < 10; j++) {
                    const data = nodes[nodes.length - (i * 10 + j)].getContext('2d').getImageData(0, 0, 99, 99);
                    ctx.putImageData(data, i * 100 , j * 100)
                }
            }

            if (nodes.length < 10000) {
                requestAnimationFrame(draw);
            }
        }

        draw();

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<canvas id="canvas" width="1000px" height="1000px"></canvas>
	<script>
	let count = 0;
	function appendNew(){
	const canvas = document.createElement('canvas');
	nodes.push(canvas);
	canvas.width = 100;
	canvas.height = 100;
	const ctx = canvas.getContext('2d');
	const color = (count % 256).toString(16).padStart(2, 0);
	count++;
	ctx.fillStyle = '#' + color + color + color;
	ctx.fillRect(0, 0, 100, 100);
	};
	const nodes = [];
	for (let i = 0; i < 1000; i++) {
	appendNew();
	}

	const c = document.getElementById('canvas');
	const ctx = c.getContext('2d');
	function draw() {
	ctx.clearRect(0, 0, 1000, 1000);
	for (let i = 0; i < 10; i++) {
	for (let j = 0; j < 5; j++) {
	const data = nodes[i * 10 + j].getContext('2d').getImageData(0, 0, 99, 99);
	ctx.putImageData(data, i * 100 , j * 100)
	}

	appendNew();
	}

	for (let i = 0; i < 10; i++) {
	for (let j = 5; j < 10; j++) {
	const data = nodes[nodes.length - (i * 10 + j)].getContext('2d').getImageData(0, 0, 99, 99);
	ctx.putImageData(data, i * 100 , j * 100)
	}
	}

	if (nodes.length < 10000) {
	requestAnimationFrame(draw);
	}
	}

	draw();

	</script>
	</body>
	</html>