Skip to content

Instantly share code, notes, and snippets.

@zxch3n
Created August 17, 2020 13:57
Show Gist options
  • Save zxch3n/00cb8c35e7a2ad7c40d2fbb02f27e7ad to your computer and use it in GitHub Desktop.
Save zxch3n/00cb8c35e7a2ad7c40d2fbb02f27e7ad to your computer and use it in GitHub Desktop.
Sourcecode to reproduce chrome bug: a large number of canvas element would cause chrome unstable
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment