In Html2Canvas JsPlumb connectors are not showing. Is there any possible to show connectors.
This is the output in my page. When downloading its not arrows.
When download arrows are not capturing
<apex:page standardStylesheets="false" >
<title>JSPlumb Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
text-align: center;
line-height: 100px;
position: absolute;
}
.custom-connection {
stroke: #1e8151;
stroke-width: 2;
}
.custom-label {
padding: 2px 5px;
background-color: #1e8151;
color: white;
font-size: 12px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.9.3/js/jsplumb.min.js"></script>
<script>
$(document).ready(function() {
jsPlumb.ready(function() {
jsPlumb.draggable($(".box"));
var instance = jsPlumb.getInstance({
Endpoint: ["Dot", { radius: 5 }],
Connector: ["Bezier", { curviness: 50 }],
PaintStyle: { stroke: "#1e8151", strokeWidth: 2 },
HoverPaintStyle: { stroke: "#1e8151", strokeWidth: 3 },
ConnectionOverlays: [
["Arrow", {
location: 1,
id: "arrow",
length: 10,
foldback: 0.8
}],
["Label", {
label: "Connection 1",
id: "label",
cssClass: "custom-label"
}]
],
Container: "canvas"
});
instance.connect({
source: "box1",
target: "box2"
});
instance.connect({
source: "box2",
target: "box3"
});
instance.connect({
source: "box3",
target: "box1"
});
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
function captureAndDownload() {
console.log('Button clicked');
html2canvas(document.querySelector("#selecteddate")).then(canvas => {
document.body.appendChild(canvas);
var link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = "datatable.png";
link.click();
});
}
</script>
<body>
<div id="selecteddate">
<button value="Download" onclick="captureAndDownload()" />
<div id="canvas" style="width: 400px; height: 300px; border: 1px solid #ccc; position: relative;"></div>
<div id="box1" class="box" style="left: 50px; top: 50px;">Box 1</div>
<div id="box2" class="box" style="left: 200px; top: 50px;">Box 2</div>
<div id="box3" class="box" style="left: 200px; top: 200px;">Box 3</div>
</div>
</body>
</apex:page>
expecting download images with arrows