10,000 Shapes with Tooltips Stress Test with Konva

Konva 10,000 Shapes with Tooltips Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.2/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva 10,000 Shapes with Tooltips Stress Test Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var circlesLayer = new Konva.Layer();
var tooltipLayer = new Konva.Layer();
var colors = ["red", "orange", "yellow", "green", "blue", "cyan", "purple"];
var colorIndex = 0;
for(var i = 0; i < 10000; i++) {
var color = colors[colorIndex++];
if(colorIndex >= colors.length) {
colorIndex = 0;
}
var randX = Math.random() * stage.getWidth();
var randY = Math.random() * stage.getHeight();
var circle = new Konva.Circle({
x: randX,
y: randY,
radius: 3,
fill: color,
name : i.toString()
});
circlesLayer.add(circle);
}
var tooltip = new Konva.Text({
text: "",
fontFamily: "Calibri",
fontSize: 12,
padding: 5,
visible: false,
fill: "black",
opacity: 0.75,
textFill: "white"
});
tooltipLayer.add(tooltip);
stage.add(circlesLayer);
stage.add(tooltipLayer);
circlesLayer.on("mousemove", function(e) {
// update tooltip
var mousePos = stage.getPointerPosition();
tooltip.position({
x : mousePos.x + 5,
y : mousePos.y + 5
});
tooltip.text("node: " + e.target.name() + ", color: " + e.target.fill());
tooltip.show();
tooltipLayer.draw();
});
circlesLayer.on("mouseout", function() {
tooltip.hide();
tooltipLayer.draw();
});
</script>
</body>
</html>