Click on an fabricjs element is not recognized

Click on an fabricjs element is not recognized - javascript

I am trying to build a simple editor using fabricjs.
I did the following:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
touch-action: none;
background-image: linear-gradient(to bottom left, rgb(214, 240, 201) 10%, rgba(255, 231, 191, 1) 80%);
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.input-group {
padding: 4px;
}
.canvas-container {
margin: 0 auto;
width: 100%;
overflow: hidden;
background: url(./transparent.png);
background-size: 15px 15px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.actived {
background: #fff9a8;
}
.list-group {
line-height: 35px;
}
.svg-icon {
width: 1em;
height: 1em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
.input-group-text {
background-color: #f4f4f4;
}
.list-group-item {
padding: 2px 10px;
;
cursor: pointer;
}
.list-group {
border-radius: 0;
text-align: left;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-3 border-end text-center h-100 overflow-scroll bg-light py-3">
<hr>
<div class="form-floating w-100 mb-3 tour5">
<h6 class="mb-3">Add Element</h6>
<button class="btn btn-outline-primary" onclick="addText();" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Add Text" aria-label="Add Text"><i
class="fa fa-font"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Circle({ name: genNextName(), originX:'center', originY:'center', radius: 30, fill: '#000', top: 100, left: 100 }));" data-bs-original-title="Add Circle"
aria-label="Add Circle"><i
class="fa fa-circle"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Triangle({ name: genNextName(), originX:'center', originY:'center', height:100, width:100, fill: '#000', top: 100, left: 100 }));"
data-bs-original-title="Add Triangle">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="triangle" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class=""
style="height: 16px;top: 9px;">
<path fill="currentColor"
d="M329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.9 0 60-40 41.6-72l-240-416z"
class=""></path>
</svg>
</button>
</div>
<hr>
</div>
<div class="col-sm-6 my-auto py-4 overflow-hidden">
<div class="canvas-container" style="width: 329px; height: 329px; position: relative; user-select: none;"><canvas id="c" class="lower-canvas" width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas><canvas class="upper-canvas " width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: manipulation; user-select: none; cursor: default;"></canvas>
</div>
</div>
<div class="col-sm-3 border-start py-3 h-100 overflow-scroll bg-light text-center">
<form class="form-inline pt-4" id="f" onsubmit="return false;" style="display: none;">
<div class="form-floating w-100 mb-4" style="">
<textarea type="text" class="form-control form-control-sm" name="text" oninput="canvas.getActiveObject().set({'text':this.value}); canvas.renderAll();" onmouseover="this.style.height = (this.scrollHeight)+'px';" rows="10" autocomplete="off"></textarea>
<label for="floatingInput" class="lable-sm">Text</label>
</div>
<div class="input-group input-group-sm mb-3 w-100 tour13">
<span class="input-group-text" id="inputGroup-sizing-sm">MaxHeight to Fit Text</span>
<input type="number" class="form-control" name="maxHeight" onkeyup="hide_mh_box(); show_mh_box();" onblur="hide_mh_box();" onfocus="show_mh_box();" autocomplete="off">
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://unpkg.com/fabric#5.2.1/dist/fabric.min.js"></script>
<script src="https://rawcdn.githack.com/lyzerk/fabric-history/8c223cbdc8305307b4a8f8710f97da54d9146ffa/src/index.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
var canvas;
var apiUrl;
var startedLoadingFamilies = false;
var to;
var scale;
fabric.Text.prototype.set({
_getNonTransformedDimensions() {
return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
},
_calculateCurrentDimensions() {
return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
}
});
function fitCanvas(w, h) {
var scaleW = (document.querySelectorAll(".col-sm-6")[0].offsetWidth - 100) / w;
var scaleH = (document.querySelectorAll("body")[0].offsetHeight - 100) / h;
scale = Math.min(scaleH, scaleW);
if (scale > 1) {
scale = 1;
}
canvas.setZoom(scale);
canvas.setWidth(w * scale);
canvas.setHeight(h * scale);
initAligningGuidelines(canvas);
initCenteringGuidelines(canvas);
canvas.renderAll();
console.log("finished!!");
}
(function() {
canvas = new fabric.Canvas('c', {
allowTouchScrolling: true
});
WebFont.load({
google: {
families: ["Inter:200"]
},
active: function() {
canvas.loadFromJSON({
"height": "500",
"width": "500",
"edit": "yes",
"objects": [],
"backgroundImage": {
"crossOrigin": "anonymous"
}
}, function() {
fitCanvas(500, 500);
})
}
});
canvas.on('before:render', function(opt) {
canvas.getObjects().map(function(o, i) {
if (o.type.toLowerCase() == "textbox") {
var maxH = (o.maxHeight) ? (o.maxHeight) : (canvas.height);
o.set({
'maxHeight': maxH
});
if (o.fontSize > 0 && (maxH > o.fontSize)) {
while (o.height > maxH) {
o.set({
'fontSize': o.fontSize - 1
});
}
}
}
if (o.circleFrame) {
o.set({
clipPath: new fabric.Circle({
radius: o.width / 2,
originX: 'center',
originY: 'center'
})
});
}
if ((o.rx || o.ry) && o.type == "image") {
let rx = (o.rx || 0);
let ry = (o.ry || 0);
o.set({
clipPath: new fabric.Rect({
rx: rx,
ry: ry,
height: o.height,
width: o.width,
originX: 'center',
originY: 'center'
})
});
}
});
});
})();
</script>
<script>
fabric.Object.prototype.objectCaching = false;
function changeDim() {
fitCanvas($("#widthC").val(), $("#heightC").val());
}
function setCanvasBI(src, o = "1") {
if (!src) {
src = $("#canvasBI").val();
}
if (src.length == 0) {
src = new fabric.Image('');
}
canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), {
opacity: o
});
}
(function() {
$(document).on("mouseenter", "[data-label]", function() {
$("#font-search").val($(this).data("label"));
loadFont($(this).data("label"));
});
fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
var object = null,
objects = this.getObjects();
for (var i = 0, len = this.size(); i < len; i++) {
if (objects[i][attr] && objects[i][attr] == name) {
object = objects[i];
break;
}
}
return object;
};
$("form#f").hide();
var activeObject;
$("#f input, #f select").on("input", function() {
if (["height", "width", "top", "left", "strokeWidth", "charSpacing"].includes(this.name)) {
canvas.getActiveObject().set(this.name, parseFloat(this.value)).setCoords();
} else {
canvas.getActiveObject().set(this.name, this.value).setCoords();
}
canvas.renderAll();
});
canvas.preserveObjectStacking = true;
fabric.Object.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
name: this.name,
text: this.text
});
};
})(fabric.Object.prototype.toObject);
canvas.on('object:scaling', function(e) {
if (e.target.toObject().type != "image" && e.target.toObject().type != "circle") {
e.target.set({
width: e.target.width * e.target.scaleX,
height: e.target.height * e.target.scaleY,
scaleX: 1,
scaleY: 1
})
}
});
canvas.on('object:modified', function(opt) {
document.body.style.cursor = 'progress';
});
canvas.on("after:render", function() {
canvas.includeDefaultValues = false;
canvas.toObject().objects.forEach(function(layer, id) {
if (typeof layer.name !== 'undefined') {
canvas.getItemByAttr(`name`, layer.name).set({
"name": String.fromCharCode(65 + id).toLowerCase()
})
var actived = '';
if (canvas.getActiveObject()) {
actived = (canvas.getActiveObject().name == layer.name) ? " actived" : "";
}
}
});
document.body.style.cursor = 'default'
});
canvas.on("selection:created", function(obj) {
if ("image" == obj.target.type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
$("form#f input[type!='hidden'], #f select").parent().hide();
$("form#f").hide();
canvas.renderAll();
showForm();
});
canvas.on("selection:updated", function(obj) {
if ("image" == obj.target.type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'] , #f select, #f textarea").parent().hide();
showForm();
});
canvas.on("selection:cleared", function() {
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'], #f select, #f textarea").parent().hide();
});
canvas.hoverCursor = 'default';
canvas.on('mouse:over', function(e) {
if (e.target) {
e.target._renderControls(canvas.contextTop, {
hasControls: false
})
}
});
canvas.on('mouse:out', function(e) {
canvas.clearContext(canvas.contextTop);
});
canvas.on('mouse:down', function(e) {
canvas.clearContext(canvas.contextTop);
});
function showForm() {
$("form#f").show();
activeObject = canvas.getActiveObject();
var v;
for (i in activeObject) {
v = activeObject[i];
if (typeof v != "undefined") {
$("textarea[name='" + i + "']").val(v).parent().show();
$("input[name='" + i + "']").val(v).parent().show();
$("select[name='" + i + "']").val(v).parent().show();
}
}
}
addText = function() {
var text = new fabric.Textbox("Edit this Text", {
name: genNextName(),
left: canvas.getWidth() / canvas.getZoom() / 2,
top: canvas.getHeight() / canvas.getZoom() / 2,
width: (canvas.getWidth() / canvas.getZoom()) / 2,
fill: "#000000",
originX: "center",
originY: "center",
fontFamily: "Inter",
fontWeight: 400,
fontSize: 60,
padding: 20
});
text.setControlsVisibility({
mt: false,
mb: false,
ml: true,
mr: true,
tl: true,
tr: true,
bl: true,
br: true
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.renderAll();
};
})();
function hide_mh_box() {
canvas.remove(canvas.getItemByAttr("isBB", true));
}
function show_mh_box() {
var h = parseInt($("[name=maxHeight]").val());
var n = new fabric.Rect({
top: canvas.getActiveObject().get('top'),
left: canvas.getActiveObject().get('left'),
width: canvas.getActiveObject().get('width'),
height: h,
originX: canvas.getActiveObject().get('originX'),
originY: canvas.getActiveObject().get('originY'),
angle: canvas.getActiveObject().get('angle'),
opacity: 1,
strokeWidth: 2,
stroke: "#FF00FF",
fill: "rgba(0,0,0,0)",
evented: !1,
isBB: true
});
canvas.add(n);
canvas.renderAll();
}
var visited = [];
</script>
<script>
function genNextName() {
canvas.renderAll();
var total = canvas.getObjects().length;
return String.fromCharCode(65 + total).toLowerCase()
}
</script>
</body>
</html>
When I click on an element f.ex. the triangle it is added to the canvas. When I click on the added triangle a menu on the right should go up. However, the element does not get selected.
Any suggestions what I am doing wrong?
I appreciate your replies!

you have second canvas element next to your canvas, it prevents from clicking on first canvas element, removing this second canvas solves this issue
<canvas class="upper-canvas " width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: manipulation; user-select: none; cursor: default;"></canvas>
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
touch-action: none;
background-image: linear-gradient(to bottom left, rgb(214, 240, 201) 10%, rgba(255, 231, 191, 1) 80%);
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.input-group {
padding: 4px;
}
.canvas-container {
margin: 0 auto;
width: 100%;
overflow: hidden;
background: url(./transparent.png);
background-size: 15px 15px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.actived {
background: #fff9a8;
}
.list-group {
line-height: 35px;
}
.svg-icon {
width: 1em;
height: 1em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
.input-group-text {
background-color: #f4f4f4;
}
.list-group-item {
padding: 2px 10px;
;
cursor: pointer;
}
.list-group {
border-radius: 0;
text-align: left;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-3 border-end text-center h-100 overflow-scroll bg-light py-3">
<hr>
<div class="form-floating w-100 mb-3 tour5">
<h6 class="mb-3">Add Element</h6>
<button class="btn btn-outline-primary" onclick="addText();" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Add Text" aria-label="Add Text"><i
class="fa fa-font"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Circle({ name: genNextName(), originX:'center', originY:'center', radius: 30, fill: '#000', top: 100, left: 100 }));" data-bs-original-title="Add Circle"
aria-label="Add Circle"><i
class="fa fa-circle"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Triangle({ name: genNextName(), originX:'center', originY:'center', height:100, width:100, fill: '#000', top: 100, left: 100 }));"
data-bs-original-title="Add Triangle">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="triangle" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class=""
style="height: 16px;top: 9px;">
<path fill="currentColor"
d="M329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.9 0 60-40 41.6-72l-240-416z"
class=""></path>
</svg>
</button>
</div>
<hr>
</div>
<div class="col-sm-6 my-auto py-4 overflow-hidden">
<div class="canvas-container" style="width: 329px; height: 329px; position: relative; user-select: none;"><canvas id="c" class="lower-canvas" width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</div>
<div class="col-sm-3 border-start py-3 h-100 overflow-scroll bg-light text-center">
<form class="form-inline pt-4" id="f" onsubmit="return false;" style="display: none;">
<div class="form-floating w-100 mb-4" style="">
<textarea type="text" class="form-control form-control-sm" name="text" oninput="canvas.getActiveObject().set({'text':this.value}); canvas.renderAll();" onmouseover="this.style.height = (this.scrollHeight)+'px';" rows="10" autocomplete="off"></textarea>
<label for="floatingInput" class="lable-sm">Text</label>
</div>
<div class="input-group input-group-sm mb-3 w-100 tour13">
<span class="input-group-text" id="inputGroup-sizing-sm">MaxHeight to Fit Text</span>
<input type="number" class="form-control" name="maxHeight" onkeyup="hide_mh_box(); show_mh_box();" onblur="hide_mh_box();" onfocus="show_mh_box();" autocomplete="off">
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://unpkg.com/fabric#5.2.1/dist/fabric.min.js"></script>
<script src="https://rawcdn.githack.com/lyzerk/fabric-history/8c223cbdc8305307b4a8f8710f97da54d9146ffa/src/index.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
var canvas;
var apiUrl;
var startedLoadingFamilies = false;
var to;
var scale;
fabric.Text.prototype.set({
_getNonTransformedDimensions() {
return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
},
_calculateCurrentDimensions() {
return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
}
});
function fitCanvas(w, h) {
var scaleW = (document.querySelectorAll(".col-sm-6")[0].offsetWidth - 100) / w;
var scaleH = (document.querySelectorAll("body")[0].offsetHeight - 100) / h;
scale = Math.min(scaleH, scaleW);
if (scale > 1) {
scale = 1;
}
canvas.setZoom(scale);
canvas.setWidth(w * scale);
canvas.setHeight(h * scale);
initAligningGuidelines(canvas);
initCenteringGuidelines(canvas);
canvas.renderAll();
console.log("finished!!");
}
(function() {
canvas = new fabric.Canvas('c', {
allowTouchScrolling: true
});
WebFont.load({
google: {
families: ["Inter:200"]
},
active: function() {
canvas.loadFromJSON({
"height": "500",
"width": "500",
"edit": "yes",
"objects": [],
"backgroundImage": {
"crossOrigin": "anonymous"
}
}, function() {
fitCanvas(500, 500);
})
}
});
canvas.on('before:render', function(opt) {
canvas.getObjects().map(function(o, i) {
if (o.type.toLowerCase() == "textbox") {
var maxH = (o.maxHeight) ? (o.maxHeight) : (canvas.height);
o.set({
'maxHeight': maxH
});
if (o.fontSize > 0 && (maxH > o.fontSize)) {
while (o.height > maxH) {
o.set({
'fontSize': o.fontSize - 1
});
}
}
}
if (o.circleFrame) {
o.set({
clipPath: new fabric.Circle({
radius: o.width / 2,
originX: 'center',
originY: 'center'
})
});
}
if ((o.rx || o.ry) && o.type == "image") {
let rx = (o.rx || 0);
let ry = (o.ry || 0);
o.set({
clipPath: new fabric.Rect({
rx: rx,
ry: ry,
height: o.height,
width: o.width,
originX: 'center',
originY: 'center'
})
});
}
});
});
})();
</script>
<script>
fabric.Object.prototype.objectCaching = false;
function changeDim() {
fitCanvas($("#widthC").val(), $("#heightC").val());
}
function setCanvasBI(src, o = "1") {
if (!src) {
src = $("#canvasBI").val();
}
if (src.length == 0) {
src = new fabric.Image('');
}
canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), {
opacity: o
});
}
(function() {
$(document).on("mouseenter", "[data-label]", function() {
$("#font-search").val($(this).data("label"));
loadFont($(this).data("label"));
});
fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
var object = null,
objects = this.getObjects();
for (var i = 0, len = this.size(); i < len; i++) {
if (objects[i][attr] && objects[i][attr] == name) {
object = objects[i];
break;
}
}
return object;
};
$("form#f").hide();
var activeObject;
$("#f input, #f select").on("input", function() {
if (["height", "width", "top", "left", "strokeWidth", "charSpacing"].includes(this.name)) {
canvas.getActiveObject().set(this.name, parseFloat(this.value)).setCoords();
} else {
canvas.getActiveObject().set(this.name, this.value).setCoords();
}
canvas.renderAll();
});
canvas.preserveObjectStacking = true;
fabric.Object.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
name: this.name,
text: this.text
});
};
})(fabric.Object.prototype.toObject);
canvas.on('object:scaling', function(e) {
if (e.target.toObject().type != "image" && e.target.toObject().type != "circle") {
e.target.set({
width: e.target.width * e.target.scaleX,
height: e.target.height * e.target.scaleY,
scaleX: 1,
scaleY: 1
})
}
});
canvas.on('object:modified', function(opt) {
document.body.style.cursor = 'progress';
});
canvas.on("after:render", function() {
canvas.includeDefaultValues = false;
canvas.toObject().objects.forEach(function(layer, id) {
if (typeof layer.name !== 'undefined') {
canvas.getItemByAttr(`name`, layer.name).set({
"name": String.fromCharCode(65 + id).toLowerCase()
})
var actived = '';
if (canvas.getActiveObject()) {
actived = (canvas.getActiveObject().name == layer.name) ? " actived" : "";
}
}
});
document.body.style.cursor = 'default'
});
canvas.on("selection:created", function(obj) {
if ("image" == obj.target?.type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
$("form#f input[type!='hidden'], #f select").parent().hide();
$("form#f").hide();
canvas.renderAll();
showForm();
});
canvas.on("selection:updated", function(obj) {
if ("image" == obj.target?.type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'] , #f select, #f textarea").parent().hide();
showForm();
});
canvas.on("selection:cleared", function() {
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'], #f select, #f textarea").parent().hide();
});
canvas.hoverCursor = 'default';
canvas.on('mouse:over', function(e) {
if (e.target) {
e.target._renderControls(canvas.contextTop, {
hasControls: false
})
}
});
canvas.on('mouse:out', function(e) {
canvas.clearContext(canvas.contextTop);
});
canvas.on('mouse:down', function(e) {
canvas.clearContext(canvas.contextTop);
});
function showForm() {
$("form#f").show();
activeObject = canvas.getActiveObject();
var v;
for (i in activeObject) {
v = activeObject[i];
if (typeof v != "undefined") {
$("textarea[name='" + i + "']").val(v).parent().show();
$("input[name='" + i + "']").val(v).parent().show();
$("select[name='" + i + "']").val(v).parent().show();
}
}
}
addText = function() {
var text = new fabric.Textbox("Edit this Text", {
name: genNextName(),
left: canvas.getWidth() / canvas.getZoom() / 2,
top: canvas.getHeight() / canvas.getZoom() / 2,
width: (canvas.getWidth() / canvas.getZoom()) / 2,
fill: "#000000",
originX: "center",
originY: "center",
fontFamily: "Inter",
fontWeight: 400,
fontSize: 60,
padding: 20
});
text.setControlsVisibility({
mt: false,
mb: false,
ml: true,
mr: true,
tl: true,
tr: true,
bl: true,
br: true
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.renderAll();
};
})();
function hide_mh_box() {
canvas.remove(canvas.getItemByAttr("isBB", true));
}
function show_mh_box() {
var h = parseInt($("[name=maxHeight]").val());
var n = new fabric.Rect({
top: canvas.getActiveObject().get('top'),
left: canvas.getActiveObject().get('left'),
width: canvas.getActiveObject().get('width'),
height: h,
originX: canvas.getActiveObject().get('originX'),
originY: canvas.getActiveObject().get('originY'),
angle: canvas.getActiveObject().get('angle'),
opacity: 1,
strokeWidth: 2,
stroke: "#FF00FF",
fill: "rgba(0,0,0,0)",
evented: !1,
isBB: true
});
canvas.add(n);
canvas.renderAll();
}
var visited = [];
</script>
<script>
function genNextName() {
canvas.renderAll();
var total = canvas.getObjects().length;
return String.fromCharCode(65 + total).toLowerCase()
}
</script>
</body>
</html>

Related

How can I rename an object and render canvas in FabricJS?

I am using FabricJS 5 and have implemented a simple display for my layers.
When I press the pencil button I open a prompt and rename the layer using the following function:
function RenameLayer(name) {
let layerObj = canvas.getItemByAttr("name", name);
let newName = prompt("Rename Layer?", layerObj.name);
while (checkIfNameExists(newName)) {
alert("Your layer name: " + layerObj.name + " is NOT unique please rename your layer differently.")
newName = prompt("Rename Layer?", layerObj.name);
}
layerObj.name = newName;
canvas.renderAll();
}
function checkIfNameExists(newName) {
count = 0;
canvas.forEachObject(function(obj, i) {
if (obj.name == newName) {
count++;
}
});
if (count > 0) {
return true;
} else {
return false;
}
}
However, after renaming I get an error.
Find below my example:
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
touch-action: none;
background-image: linear-gradient(to bottom left, rgb(214, 240, 201) 10%, rgba(255, 231, 191, 1) 80%);
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.input-group {
padding: 4px;
}
.canvas-container {
margin: 0 auto;
width: 100%;
overflow: hidden;
background: url(./transparent.png);
background-size: 15px 15px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.actived {
background: #fff9a8;
}
#sortable {
max-height: 200px;
overflow: scroll;
}
.list-group {
line-height: 35px;
}
.svg-icon {
width: 1em;
height: 1em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
#bkboxXX {
background: url(transparent.png);
border: 1px solid rgba(0, 0, 0, 0.3);
display: inline-block;
height: 19px;
width: 20px;
}
.bk-btn {
background: url(/transparent.png);
}
.fl {
float: left;
}
.fr {
float: right;
}
.input-group-text {
background-color: #f4f4f4;
}
.input-group-sm>.input-group-text {
/*
padding: .2rem .3rem !important;
*/
}
.list-group-item {
padding: 2px 10px;
;
cursor: pointer;
}
.list-group {
border-radius: 0;
text-align: left;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-3 border-end text-center h-100 overflow-scroll bg-light py-3">
<div class="form-floating w-100 mb-3 tour5">
<h6 class="mb-3">Add Element</h6>
<button class="btn btn-outline-primary" onclick="addText();" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Add Text" aria-label="Add Text"><i
class="fa fa-font"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Circle({ name: genNextName(), originX:'center', originY:'center', radius: 30, fill: 'green', top: 100, left: 100 }));" data-bs-original-title="Add Circle"
aria-label="Add Circle"><i
class="fa fa-circle"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Triangle({ name: genNextName(), originX:'center', originY:'center', height:100, width:100, fill: 'red', top: 100, left: 100 }));"
data-bs-original-title="Add Triangle">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="triangle" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class=""
style="height: 16px;top: 9px;">
<path fill="currentColor"
d="M329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.9 0 60-40 41.6-72l-240-416z"
class=""></path>
</svg>
</button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="canvas.add(new fabric.Rect({ name: genNextName(), originX:'center', originY:'center', left: 110, top: 110, fill: '#000', width: 50, height: 50 }))" data-bs-original-title="Add Rectangle"><i class="fa fa-square-full"></i> </button>
</div>
<hr>
<div class="w-100 tour7 Xd-none Xd-sm-block">
<h6 class="mb-3">Elements</h6>
<ul class="list-group" id="sortable"></ul>
</div>
</div>
<div class="col-sm-6 my-auto py-4 overflow-hidden">
<div class="canvas-container" style="width: 329px; height: 329px; position: relative; user-select: none;"><canvas id="c" class="lower-canvas" width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</div>
<div class="col-sm-3 border-start py-3 h-100 overflow-scroll bg-light text-center">
right map
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://unpkg.com/fabric#5.2.1/dist/fabric.min.js"></script>
<script src="https://rawcdn.githack.com/lyzerk/fabric-history/8c223cbdc8305307b4a8f8710f97da54d9146ffa/src/index.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
function cn2h(cn) {
if (!cn) {
return 'transparent';
}
d = document.createElement("span");
d.style.display = "none";
d.style.color = cn
document.body.appendChild(d)
return rgba2hex(window.getComputedStyle(d).color);
}
</script>
<script>
var canvas;
var apiUrl;
var startedLoadingFamilies = false;
var to;
var scale;
fabric.Text.prototype.set({
_getNonTransformedDimensions() { // Object dimensions
return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
},
_calculateCurrentDimensions() { // Controls dimensions
return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
}
});
function fitCanvas(w, h) {
var scaleW = (document.querySelectorAll(".col-sm-6")[0].offsetWidth - 100) / w;
var scaleH = (document.querySelectorAll("body")[0].offsetHeight - 100) / h;
scale = Math.min(scaleH, scaleW);
if (scale > 1) {
scale = 1;
}
canvas.setZoom(scale);
canvas.setWidth(w * scale);
canvas.setHeight(h * scale);
initAligningGuidelines(canvas);
initCenteringGuidelines(canvas);
canvas.renderAll();
console.log("finished!!");
}
(function() {
canvas = new fabric.Canvas('c', {
allowTouchScrolling: true
});
WebFont.load({
google: {
families: ["Inter:200"]
},
active: function() {
canvas.loadFromJSON({
"height": "500",
"width": "500",
"edit": "yes",
"objects": [],
"backgroundImage": {
"crossOrigin": "anonymous"
}
}, function() {
fitCanvas(500, 500);
})
}
});
canvas.on('before:render', function(opt) {
canvas.getObjects().map(function(o, i) {
if (o.type.toLowerCase() == "textbox") {
var maxH = (o.maxHeight) ? (o.maxHeight) : (canvas.height);
o.set({
'maxHeight': maxH
});
if (o.fontSize > 0 && (maxH > o.fontSize)) {
while (o.height > maxH) {
o.set({
'fontSize': o.fontSize - 1
});
}
}
}
if (o.circleFrame) {
o.set({
clipPath: new fabric.Circle({
radius: o.width / 2,
originX: 'center',
originY: 'center'
})
});
}
if ((o.rx || o.ry) && o.type == "image") {
let rx = (o.rx || 0);
let ry = (o.ry || 0);
o.set({
clipPath: new fabric.Rect({
rx: rx,
ry: ry,
height: o.height,
width: o.width,
originX: 'center',
originY: 'center'
})
});
}
});
});
})();
</script>
<script>
fabric.Object.prototype.objectCaching = false;
function setCanvasBG(clr) {
canvas.backgroundColor = clr;
canvas.renderAll();
}
function changeDim() {
fitCanvas($("#widthC").val(), $("#heightC").val());
}
function setColor(clr, what = 'fill') {
canvas.getActiveObject().set(what, clr);
canvas.renderAll();
}
(function() {
$(document).on("mouseenter", "[data-label]", function() {
$("#font-search").val($(this).data("label"));
loadFont($(this).data("label"));
});
fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
var object = null,
objects = this.getObjects();
for (var i = 0, len = this.size(); i < len; i++) {
if (objects[i][attr] && objects[i][attr] == name) {
object = objects[i];
break;
}
}
return object;
};
$("form#f").hide();
var activeObject;
$("#f input, #f select").on("input", function() {
if (["height", "width", "top", "left", "strokeWidth", "charSpacing"].includes(this.name)) {
canvas.getActiveObject().set(this.name, parseFloat(this.value)).setCoords();
} else {
canvas.getActiveObject().set(this.name, this.value).setCoords();
}
canvas.renderAll();
});
canvas.preserveObjectStacking = true;
fabric.Object.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
name: this.name,
text: this.text,
textAlign: this.textAlign,
fontSize: this.fontSize,
charSpacing: this.charSpacing,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
fontFamily: this.fontFamily,
fontStyle: this.fontStyle,
textBackgroundColor: this.textBackgroundColor,
originX: this.originX,
originY: this.originY,
maxHeight: this.maxHeight,
height: this.height,
width: this.width,
radius: this.radius,
rx: this.rx,
ry: this.ry,
stroke: this.stroke,
padding: this.padding,
circleFrame: this.circleFrame
});
};
})(fabric.Object.prototype.toObject);
canvas.on('object:scaling', function(e) {
if (e.target.toObject().type != "image" && e.target.toObject().type != "circle") {
e.target.set({
width: e.target.width * e.target.scaleX,
height: e.target.height * e.target.scaleY,
scaleX: 1,
scaleY: 1
})
}
});
canvas.on('object:modified', function(opt) {
document.body.style.cursor = 'progress';
});
canvas.on("after:render", function() {
$("#sortable").empty();
canvas.includeDefaultValues = false;
canvas.toObject().objects.forEach(function(layer, id) {
if (typeof layer.name !== 'undefined') {
//console.log(id,layer.name);
//canvas.getItemByAttr(`name`, layer.name).set({ "name": String.fromCharCode(65 + id).toLowerCase() })
canvas.getItemByAttr(`name`, layer.name).set({
"name": layer.name.replace(/ /g, "_")
})
var actived = '';
if (canvas.getActiveObject()) {
actived = (canvas.getActiveObject().name == layer.name) ? " actived" : "";
}
$("#sortable").append('<li class="list-group-item ui-sortable-handle clearfix ' + actived + '" onClick="canvas.setActiveObject(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();" id=' + layer.name + '>' + layer.name + ' (' + layer.type + ')' + '<span class="fr button-group"><a class="mx-2" title="Edit" href="#" onClick="RenameLayer(`' + layer.name + '`)"><i class="fa fa-pencil-alt" aria-hidden="true"></i></a><a class="mx-2" title="Delete" href="#" onClick="if(confirm(`Are you sure?`)){canvas.remove(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();}"><i class="fa fa-trash-alt" aria-hidden="true"></i></a><a class="me-2" title="Duplicate this layer" href="#" onClick="Duplicate(`' + layer.name + '`); canvas.renderAll();"><i class="fa fa-clone" aria-hidden="true"></i></a></span></li>');
}
});
document.body.style.cursor = 'default'
});
canvas.on("selection:created", function(obj) {
if ("image" == obj.selected[0].type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
$("form#f input[type!='hidden'], #f select").parent().hide();
$("form#f").hide();
canvas.renderAll();
});
canvas.on("selection:updated", function(obj) {
if ("image" == obj.selected[0].type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'] , #f select, #f textarea").parent().hide();
});
canvas.on("selection:cleared", function() {
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'], #f select, #f textarea").parent().hide();
});
canvas.hoverCursor = 'default';
canvas.on('mouse:over', function(e) {
if (e.target) {
e.target._renderControls(canvas.contextTop, {
hasControls: false
})
}
});
canvas.on('mouse:out', function(e) {
canvas.clearContext(canvas.contextTop);
});
canvas.on('mouse:down', function(e) {
canvas.clearContext(canvas.contextTop);
});
addText = function() {
var text = new fabric.Textbox("Edit this Text", {
name: genNextName(),
left: canvas.getWidth() / canvas.getZoom() / 2,
top: canvas.getHeight() / canvas.getZoom() / 2,
width: (canvas.getWidth() / canvas.getZoom()) / 2,
fill: "#000000",
originX: "center",
originY: "center",
fontFamily: "Inter",
fontWeight: 400,
fontSize: 60,
padding: 20
});
text.setControlsVisibility({
mt: false,
mb: false,
ml: true,
mr: true,
tl: true,
tr: true,
bl: true,
br: true
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.renderAll();
};
})();
function hide_mh_box() {
canvas.remove(canvas.getItemByAttr("isBB", true));
}
function show_mh_box() {
var h = parseInt($("[name=maxHeight]").val());
var n = new fabric.Rect({
top: canvas.getActiveObject().get('top'),
left: canvas.getActiveObject().get('left'),
width: canvas.getActiveObject().get('width'),
height: h,
originX: canvas.getActiveObject().get('originX'),
originY: canvas.getActiveObject().get('originY'),
angle: canvas.getActiveObject().get('angle'),
opacity: 1,
strokeWidth: 2,
stroke: "#FF00FF",
fill: "rgba(0,0,0,0)",
evented: !1,
isBB: true
});
canvas.add(n);
canvas.renderAll();
}
var visited = [];
$(document).ready(function() {
$("input[type=color]").on("input", function() {
$(this).parent().parent().find('input').first().val(this.value);
});
$("textarea, input").attr("autocomplete", "off");
if (window !== window.parent) {
const url = new URL(document.referrer);
$(".isIframe").removeClass('d-none');
$(".notIframe").hide();
}
});
</script>
<script>
function Duplicate(name) {
Copy(name);
}
function Copy(name) {
canvas.getItemByAttr("name", name).clone(function(cloned) {
cloned.set({
"name": genNextName()
})
_clipboard = cloned;
Paste(name);
canvas.renderAll();
});
}
function RenameLayer(name) {
let layerObj = canvas.getItemByAttr("name", name);
let newName = prompt("Rename Layer?", layerObj.name);
while (checkIfNameExists(newName)) {
alert("Your layer name: " + layerObj.name + " is NOT unique please rename your layer differently.")
newName = prompt("Rename Layer?", layerObj.name);
}
layerObj.name = newName;
canvas.renderAll();
}
function checkIfNameExists(newName) {
count = 0;
canvas.forEachObject(function(obj, i) {
if (obj.name == newName) {
count++;
}
});
if (count > 0) {
return true;
} else {
return false;
}
}
function Paste(name) {
_clipboard.clone(function(clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
clonedObj.canvas = canvas;
clonedObj.forEachObject(function(obj) {
canvas.add(obj);
});
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
_clipboard.top += 10;
_clipboard.left += 10;
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
}
function genNextName() {
canvas.renderAll();
var total = canvas.getObjects().length;
return String.fromCharCode(65 + total).toLowerCase()
}
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.borderColor = '#5cdce4';
fabric.Object.prototype.cornerColor = 'white';
fabric.Object.prototype.cornerStrokeColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';
fabric.Object.prototype.cornerSize = 10;
fabric.Object.prototype.borderScaleFactor = 2;
</script>
</body>
</html>
Any suggestions what I am doing wrong?
I appreciate your replies!

I didn't do deep debugging of the code, but since in many places the layer "name" is used as a key value, you can try renaming the layer (and subsequent updating) in a separate macrotask, using setTimeout.
Instead of this code:
layerObj.name = newName;
canvas.renderAll();
try this code:
setTimeout(() => {
layerObj.name = newName;
canvas.renderAll();
});
Example of your code with setTimeout:
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<style>
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
touch-action: none;
background-image: linear-gradient(to bottom left, rgb(214, 240, 201) 10%, rgba(255, 231, 191, 1) 80%);
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.input-group {
padding: 4px;
}
.canvas-container {
margin: 0 auto;
width: 100%;
overflow: hidden;
background: url(./transparent.png);
background-size: 15px 15px;
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.actived {
background: #fff9a8;
}
#sortable {
max-height: 200px;
overflow: scroll;
}
.list-group {
line-height: 35px;
}
.svg-icon {
width: 1em;
height: 1em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
#bkboxXX {
background: url(transparent.png);
border: 1px solid rgba(0, 0, 0, 0.3);
display: inline-block;
height: 19px;
width: 20px;
}
.bk-btn {
background: url(/transparent.png);
}
.fl {
float: left;
}
.fr {
float: right;
}
.input-group-text {
background-color: #f4f4f4;
}
.input-group-sm>.input-group-text {
/*
padding: .2rem .3rem !important;
*/
}
.list-group-item {
padding: 2px 10px;
;
cursor: pointer;
}
.list-group {
border-radius: 0;
text-align: left;
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-3 border-end text-center h-100 overflow-scroll bg-light py-3">
<div class="form-floating w-100 mb-3 tour5">
<h6 class="mb-3">Add Element</h6>
<button class="btn btn-outline-primary" onclick="addText();" data-toggle="tooltip" data-placement="top" title="" data-bs-original-title="Add Text" aria-label="Add Text"><i
class="fa fa-font"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Circle({ name: genNextName(), originX:'center', originY:'center', radius: 30, fill: 'green', top: 100, left: 100 }));" data-bs-original-title="Add Circle"
aria-label="Add Circle"><i
class="fa fa-circle"></i></button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick=" canvas.add(new fabric.Triangle({ name: genNextName(), originX:'center', originY:'center', height:100, width:100, fill: 'red', top: 100, left: 100 }));"
data-bs-original-title="Add Triangle">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="triangle" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class=""
style="height: 16px;top: 9px;">
<path fill="currentColor"
d="M329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.9 0 60-40 41.6-72l-240-416z"
class=""></path>
</svg>
</button>
<button class="btn btn-outline-primary" data-toggle="tooltip" data-placement="top" title="" onclick="canvas.add(new fabric.Rect({ name: genNextName(), originX:'center', originY:'center', left: 110, top: 110, fill: '#000', width: 50, height: 50 }))" data-bs-original-title="Add Rectangle"><i class="fa fa-square-full"></i> </button>
</div>
<hr>
<div class="w-100 tour7 Xd-none Xd-sm-block">
<h6 class="mb-3">Elements</h6>
<ul class="list-group" id="sortable"></ul>
</div>
</div>
<div class="col-sm-6 my-auto py-4 overflow-hidden">
<div class="canvas-container" style="width: 329px; height: 329px; position: relative; user-select: none;"><canvas id="c" class="lower-canvas" width="329" height="329" style="position: absolute; width: 329px; height: 329px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</div>
<div class="col-sm-3 border-start py-3 h-100 overflow-scroll bg-light text-center">
right map
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="https://unpkg.com/fabric#5.2.1/dist/fabric.min.js"></script>
<script src="https://rawcdn.githack.com/lyzerk/fabric-history/8c223cbdc8305307b4a8f8710f97da54d9146ffa/src/index.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`
function cn2h(cn) {
if (!cn) {
return 'transparent';
}
d = document.createElement("span");
d.style.display = "none";
d.style.color = cn
document.body.appendChild(d)
return rgba2hex(window.getComputedStyle(d).color);
}
</script>
<script>
var canvas;
var apiUrl;
var startedLoadingFamilies = false;
var to;
var scale;
fabric.Text.prototype.set({
_getNonTransformedDimensions() { // Object dimensions
return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
},
_calculateCurrentDimensions() { // Controls dimensions
return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
}
});
function fitCanvas(w, h) {
var scaleW = (document.querySelectorAll(".col-sm-6")[0].offsetWidth - 100) / w;
var scaleH = (document.querySelectorAll("body")[0].offsetHeight - 100) / h;
scale = Math.min(scaleH, scaleW);
if (scale > 1) {
scale = 1;
}
canvas.setZoom(scale);
canvas.setWidth(w * scale);
canvas.setHeight(h * scale);
initAligningGuidelines(canvas);
initCenteringGuidelines(canvas);
canvas.renderAll();
console.log("finished!!");
}
(function() {
canvas = new fabric.Canvas('c', {
allowTouchScrolling: true
});
WebFont.load({
google: {
families: ["Inter:200"]
},
active: function() {
canvas.loadFromJSON({
"height": "500",
"width": "500",
"edit": "yes",
"objects": [],
"backgroundImage": {
"crossOrigin": "anonymous"
}
}, function() {
fitCanvas(500, 500);
})
}
});
canvas.on('before:render', function(opt) {
canvas.getObjects().map(function(o, i) {
if (o.type.toLowerCase() == "textbox") {
var maxH = (o.maxHeight) ? (o.maxHeight) : (canvas.height);
o.set({
'maxHeight': maxH
});
if (o.fontSize > 0 && (maxH > o.fontSize)) {
while (o.height > maxH) {
o.set({
'fontSize': o.fontSize - 1
});
}
}
}
if (o.circleFrame) {
o.set({
clipPath: new fabric.Circle({
radius: o.width / 2,
originX: 'center',
originY: 'center'
})
});
}
if ((o.rx || o.ry) && o.type == "image") {
let rx = (o.rx || 0);
let ry = (o.ry || 0);
o.set({
clipPath: new fabric.Rect({
rx: rx,
ry: ry,
height: o.height,
width: o.width,
originX: 'center',
originY: 'center'
})
});
}
});
});
})();
</script>
<script>
fabric.Object.prototype.objectCaching = false;
function setCanvasBG(clr) {
canvas.backgroundColor = clr;
canvas.renderAll();
}
function changeDim() {
fitCanvas($("#widthC").val(), $("#heightC").val());
}
function setColor(clr, what = 'fill') {
canvas.getActiveObject().set(what, clr);
canvas.renderAll();
}
(function() {
$(document).on("mouseenter", "[data-label]", function() {
$("#font-search").val($(this).data("label"));
loadFont($(this).data("label"));
});
fabric.Canvas.prototype.getItemByAttr = function(attr, name) {
var object = null,
objects = this.getObjects();
for (var i = 0, len = this.size(); i < len; i++) {
if (objects[i][attr] && objects[i][attr] == name) {
object = objects[i];
break;
}
}
return object;
};
$("form#f").hide();
var activeObject;
$("#f input, #f select").on("input", function() {
if (["height", "width", "top", "left", "strokeWidth", "charSpacing"].includes(this.name)) {
canvas.getActiveObject().set(this.name, parseFloat(this.value)).setCoords();
} else {
canvas.getActiveObject().set(this.name, this.value).setCoords();
}
canvas.renderAll();
});
canvas.preserveObjectStacking = true;
fabric.Object.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
name: this.name,
text: this.text,
textAlign: this.textAlign,
fontSize: this.fontSize,
charSpacing: this.charSpacing,
lineHeight: this.lineHeight,
fontWeight: this.fontWeight,
fontFamily: this.fontFamily,
fontStyle: this.fontStyle,
textBackgroundColor: this.textBackgroundColor,
originX: this.originX,
originY: this.originY,
maxHeight: this.maxHeight,
height: this.height,
width: this.width,
radius: this.radius,
rx: this.rx,
ry: this.ry,
stroke: this.stroke,
padding: this.padding,
circleFrame: this.circleFrame
});
};
})(fabric.Object.prototype.toObject);
canvas.on('object:scaling', function(e) {
if (e.target.toObject().type != "image" && e.target.toObject().type != "circle") {
e.target.set({
width: e.target.width * e.target.scaleX,
height: e.target.height * e.target.scaleY,
scaleX: 1,
scaleY: 1
})
}
});
canvas.on('object:modified', function(opt) {
document.body.style.cursor = 'progress';
});
canvas.on("after:render", function() {
$("#sortable").empty();
canvas.includeDefaultValues = false;
canvas.toObject().objects.forEach(function(layer, id) {
if (typeof layer.name !== 'undefined') {
//console.log(id,layer.name);
//canvas.getItemByAttr(`name`, layer.name).set({ "name": String.fromCharCode(65 + id).toLowerCase() })
canvas.getItemByAttr(`name`, layer.name).set({
"name": layer.name.replace(/ /g, "_")
})
var actived = '';
if (canvas.getActiveObject()) {
actived = (canvas.getActiveObject().name == layer.name) ? " actived" : "";
}
$("#sortable").append('<li class="list-group-item ui-sortable-handle clearfix ' + actived + '" onClick="canvas.setActiveObject(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();" id=' + layer.name + '>' + layer.name + ' (' + layer.type + ')' + '<span class="fr button-group"><a class="mx-2" title="Edit" href="#" onClick="RenameLayer(`' + layer.name + '`)"><i class="fa fa-pencil-alt" aria-hidden="true"></i></a><a class="mx-2" title="Delete" href="#" onClick="if(confirm(`Are you sure?`)){canvas.remove(canvas.getItemByAttr(`name`,`' + layer.name + '`)); canvas.renderAll();}"><i class="fa fa-trash-alt" aria-hidden="true"></i></a><a class="me-2" title="Duplicate this layer" href="#" onClick="Duplicate(`' + layer.name + '`); canvas.renderAll();"><i class="fa fa-clone" aria-hidden="true"></i></a></span></li>');
}
});
document.body.style.cursor = 'default'
});
canvas.on("selection:created", function(obj) {
if ("image" == obj.selected[0].type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
$("form#f input[type!='hidden'], #f select").parent().hide();
$("form#f").hide();
canvas.renderAll();
});
canvas.on("selection:updated", function(obj) {
if ("image" == obj.selected[0].type) {
canvas.getActiveObject().setControlsVisibility({
mb: false,
ml: false,
mt: false,
mr: false
});
}
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'] , #f select, #f textarea").parent().hide();
});
canvas.on("selection:cleared", function() {
canvas.renderAll();
$("form#f").hide();
$("form#f input[type!='hidden'], #f select, #f textarea").parent().hide();
});
canvas.hoverCursor = 'default';
canvas.on('mouse:over', function(e) {
if (e.target) {
e.target._renderControls(canvas.contextTop, {
hasControls: false
})
}
});
canvas.on('mouse:out', function(e) {
canvas.clearContext(canvas.contextTop);
});
canvas.on('mouse:down', function(e) {
canvas.clearContext(canvas.contextTop);
});
addText = function() {
var text = new fabric.Textbox("Edit this Text", {
name: genNextName(),
left: canvas.getWidth() / canvas.getZoom() / 2,
top: canvas.getHeight() / canvas.getZoom() / 2,
width: (canvas.getWidth() / canvas.getZoom()) / 2,
fill: "#000000",
originX: "center",
originY: "center",
fontFamily: "Inter",
fontWeight: 400,
fontSize: 60,
padding: 20
});
text.setControlsVisibility({
mt: false,
mb: false,
ml: true,
mr: true,
tl: true,
tr: true,
bl: true,
br: true
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.renderAll();
};
})();
function hide_mh_box() {
canvas.remove(canvas.getItemByAttr("isBB", true));
}
function show_mh_box() {
var h = parseInt($("[name=maxHeight]").val());
var n = new fabric.Rect({
top: canvas.getActiveObject().get('top'),
left: canvas.getActiveObject().get('left'),
width: canvas.getActiveObject().get('width'),
height: h,
originX: canvas.getActiveObject().get('originX'),
originY: canvas.getActiveObject().get('originY'),
angle: canvas.getActiveObject().get('angle'),
opacity: 1,
strokeWidth: 2,
stroke: "#FF00FF",
fill: "rgba(0,0,0,0)",
evented: !1,
isBB: true
});
canvas.add(n);
canvas.renderAll();
}
var visited = [];
$(document).ready(function() {
$("input[type=color]").on("input", function() {
$(this).parent().parent().find('input').first().val(this.value);
});
$("textarea, input").attr("autocomplete", "off");
if (window !== window.parent) {
const url = new URL(document.referrer);
$(".isIframe").removeClass('d-none');
$(".notIframe").hide();
}
});
</script>
<script>
function Duplicate(name) {
Copy(name);
}
function Copy(name) {
canvas.getItemByAttr("name", name).clone(function(cloned) {
cloned.set({
"name": genNextName()
})
_clipboard = cloned;
Paste(name);
canvas.renderAll();
});
}
function RenameLayer(name) {
let layerObj = canvas.getItemByAttr("name", name);
let newName = prompt("Rename Layer?", layerObj.name);
while (checkIfNameExists(newName)) {
alert("Your layer name: " + layerObj.name + " is NOT unique please rename your layer differently.")
newName = prompt("Rename Layer?", layerObj.name);
}
setTimeout(() => {
layerObj.name = newName;
canvas.renderAll();
})
}
function checkIfNameExists(newName) {
count = 0;
canvas.forEachObject(function(obj, i) {
if (obj.name == newName) {
count++;
}
});
if (count > 0) {
return true;
} else {
return false;
}
}
function Paste(name) {
_clipboard.clone(function(clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
clonedObj.canvas = canvas;
clonedObj.forEachObject(function(obj) {
canvas.add(obj);
});
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
_clipboard.top += 10;
_clipboard.left += 10;
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
}
function genNextName() {
canvas.renderAll();
var total = canvas.getObjects().length;
return String.fromCharCode(65 + total).toLowerCase()
}
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.borderColor = '#5cdce4';
fabric.Object.prototype.cornerColor = 'white';
fabric.Object.prototype.cornerStrokeColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';
fabric.Object.prototype.cornerSize = 10;
fabric.Object.prototype.borderScaleFactor = 2;
</script>
</body>
</html>
This solution is not optimal. But to be honest, the whole code needs serious refactoring. However, perhaps such a solution at the moment will be able to suit you.

canvasjs Charts takes too much time to render

through WebSocket fetching the data from The developers.binary but canvasjs is rendering to the charts taking too much time but I saw that a lot of charts all are rendering normally not taking much time. I want to know that why it happens
what should I do to render the charts quickly?
I need to visible the charts quickly
is it taking time to the API call or I've mistaken anything?
window.addEventListener('load', function(e) {
var ws, b, rnd, spot, time, dps, xd, digit, cnt, random, id, lng, str, chart, xVal, yVal, mType, mColor, rndMenu;
ws = new WebSocket("wss://ws.binaryws.com/websockets/v3?app_id=3738&l=" + lng);
str = ["R_100", "R_10", "R_25", "R_50", "R_75", "RDBEAR", "RDBULL"];
dps = [];
time = [0];
spot = [0];
digit = [0];
mType = "none";
mColor = "#32cd32";
lng = "EN";
xVal = 0;
yVal = 0;
cnt = 20;
rndMenu = document.querySelectorAll('div.menu > span');
function toggleDigit(d, m) {
var nameClass = document.querySelector("#digits > span:nth-child(" + d + ")").className;
if (nameClass != "digits_moved_" + m) {
document.querySelector("#digits > span:nth-child(" + d + ")").classList.remove(nameClass);
document.querySelector("#digits > span:nth-child(" + d + ")").classList.add("digits_moved_" + m);
}
}
function rndGet() {
random = document.querySelector("body > div.menu > span.menu-active").title;
rnd = "R_10";
xd = 3;
}
rndGet();
ws.onopen = function(evt) {
ws.send(JSON.stringify({
ticks: rnd
}));
};
ws.onmessage = function(msg) {
b = JSON.parse(msg.data);
if (b.tick) {
if (b.echo_req.ticks == rnd) {
id = b.tick.id;
ws.send(JSON.stringify({
ticks_history: rnd,
end: "latest",
start: 1,
style: "ticks",
count: cnt + 1
}));
} else {
ws.send(JSON.stringify({
forget: id
}));
ws.send(JSON.stringify({
forget_all: "ticks"
}));
ws.send(JSON.stringify({
ticks: rnd
}));
};
};
if (b.history) {
if (b.echo_req.ticks_history == rnd) {
for (var i = 0; i < cnt + 1; i++) {
time[i] = b.history.times[cnt - i];
spot[i] = b.history.prices[cnt - i];
spot[i] = Number(spot[i]).toFixed(xd);
digit[i] = spot[i].slice(-1);
}
for (var i = 0; i < cnt + 1; i++) {
xVal = new Date(time[i] * 1000);
yVal = parseFloat(spot[i]);
if (i == 0) mType = "circle";
else mType = "none";
if (yVal == Math.max.apply(null, spot)) {
mColor = "#29abe2";
mType = "circle";
} else if (yVal == Math.min.apply(null, spot)) {
mColor = "#c03";
mType = "circle";
} else {
mColor = "#32cd32";
}
dps.push({
x: xVal,
y: yVal,
markerType: mType,
markerColor: mColor,
markerBorderColor: "#ccc"
});
}
chart.render()
spot.reverse();
digit.reverse();
for (var i = 1; i < cnt + 1; i++) {
document.querySelector("#digits > span:nth-child(" + i + ")").innerHTML = digit[i];
if (spot[i - 1] < spot[i]) {
toggleDigit(i, "up");
} else if (spot[i - 1] > spot[i]) {
toggleDigit(i, "down");
} else if (spot[i - 1] == spot[i] && i - 1 > 0) {
if (document.querySelector("#digits > span:nth-child(" + (i - 1) + ")").className == "digits_moved_up") {
toggleDigit(i, "up");
} else if (document.querySelector("#digits > span:nth-child(" + (i - 1) + ")").className == "digits_moved_down") {
toggleDigit(i, "down");
}
}
}
};
};
};
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: false,
theme: "light2",
title: {
titleFontSize: 0,
text: ""
},
toolTip: {
enabled: true,
animationEnabled: true,
borderColor: "#ccc",
borderThickness: 1,
fontColor: "#000",
content: "{y}"
},
axisX: {
includeZero: false,
titleFontSize: 0,
labelFontSize: 0,
gridThickness: 0,
tickLength: 0,
lineThickness: 0
},
axisY: {
includeZero: false,
titleFontSize: 0,
labelFontSize: 0,
gridThickness: 0,
tickLength: 0,
lineThickness: 0
},
data: [{
type: "spline",
lineColor: "#ccc",
lineThickness: 2,
markerType: "none",
markerSize: 5,
markerBorderThickness: 0,
dataPoints: dps
}],
});
e.preventDefault()
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Asim chart</title>
<style>
body {
margin: 0;
padding: 0 10px;
font-size: 16px;
text-align: center;
font-family: "Arial", sans-serif;
}
h1 {
font-size: 34px;
}
.menu {
margin-bottom: 16px;
display: flex;
}
.menu span {
padding: 3px 0;
flex-basis: auto;
flex-grow: 1;
text-align: center;
font-size: 16px;
border-radius: 5px;
color: #fff;
background-color: #666666;
}
.menu span:hover {
background: #191919;
}
span.menu-active {
background: #191919;
}
.digits {
margin-bottom: 20px;
display: flex;
}
.disclaimer {
font-size: 11px;
text-align: center;
font-family: "Arial", sans-serif;
color: #707070;
}
.digits span {
padding: 25px 0;
flex-basis: auto;
flex-grow: 1;
text-align: center;
font-size: 24px;
border-radius: 15px;
color: #fff;
}
.digits_moved_down {
background-color: #c03;
}
.digits_moved_up {
background-color: #29abe2;
}
.chartContainer {
min-height: 350px;
min-width: 50px;
}
</style>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body class="EN">
<h1>charts</h1>
<h3>charts difference</h3>
<div class="menu">
<span class="" title="R_100">100</span>
<span class="menu-active" title="R_10">10</span>
<span class="" title="R_25">25</span>
<span class="" title="R_50">50</span>
<span class="" title="R_75">75</span>
<span class="" title="RDBEAR">ODD/EVEN</span>
<span class="" title="RDBULL">MATCH/DIFFERS</span>
</div>
<p>Charts might take up to 30 secs to load.. please wait...</p>
<div id="digits" class="digits">
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
</div>
<div class="chartContainer" id="chartContainer"></div>
<div class="disclaimer">
</div>
</body>
</html>

Chart is getting rendered within 20-30 milliseconds. However, API call & the response seems to be taking 3-5 secs. Below is the code showcasing the time taken:
window.addEventListener('load', function (e) {
var timeNow;
var ws, b, rnd, spot, time, dps, xd, digit, cnt, random, id, lng, str, chart, xVal, yVal, mType, mColor, rndMenu;
ws = new WebSocket("wss://ws.binaryws.com/websockets/v3?app_id=3738&l=" + lng);
str = ["R_100", "R_10", "R_25", "R_50", "R_75", "RDBEAR", "RDBULL"];
dps = [];
time = [0];
spot = [0];
digit = [0];
mType = "none";
mColor = "#32cd32";
lng = "EN";
xVal = 0;
yVal = 0;
cnt = 20;
rndMenu = document.querySelectorAll('div.menu > span');
function toggleDigit(d, m) {
var nameClass = document.querySelector("#digits > span:nth-child(" + d + ")").className;
if (nameClass != "digits_moved_" + m) {
document.querySelector("#digits > span:nth-child(" + d + ")").classList.remove(nameClass);
document.querySelector("#digits > span:nth-child(" + d + ")").classList.add("digits_moved_" + m);
}
}
function rndGet() {
random = document.querySelector("body > div.menu > span.menu-active").title;
rnd = "R_10";
xd = 3;
}
rndGet();
ws.onopen = function (evt) {
ws.send(JSON.stringify({
ticks: rnd
}));
};
ws.onmessage = function (msg) {
b = JSON.parse(msg.data);
if (b.tick) {
if (b.echo_req.ticks == rnd) {
id = b.tick.id;
ws.send(JSON.stringify({
ticks_history: rnd,
end: "latest",
start: 1,
style: "ticks",
count: cnt + 1
}));
} else {
ws.send(JSON.stringify({
forget: id
}));
ws.send(JSON.stringify({
forget_all: "ticks"
}));
ws.send(JSON.stringify({
ticks: rnd
}));
};
};
if (b.history) {
if (b.echo_req.ticks_history == rnd) {
for (var i = 0; i < cnt + 1; i++) {
time[i] = b.history.times[cnt - i];
spot[i] = b.history.prices[cnt - i];
spot[i] = Number(spot[i]).toFixed(xd);
digit[i] = spot[i].slice(-1);
}
for (var i = 0; i < cnt + 1; i++) {
xVal = new Date(time[i] * 1000);
yVal = parseFloat(spot[i]);
if (i == 0) mType = "circle";
else mType = "none";
if (yVal == Math.max.apply(null, spot)) {
mColor = "#29abe2";
mType = "circle";
} else if (yVal == Math.min.apply(null, spot)) {
mColor = "#c03";
mType = "circle";
} else {
mColor = "#32cd32";
}
dps.push({
x: xVal,
y: yVal,
markerType: mType,
markerColor: mColor,
markerBorderColor: "#ccc"
});
}
var startTime = new Date().getTime();
chart.render();
console.log("Chart rendered in: ", new Date().getTime() - startTime + "ms");
spot.reverse();
digit.reverse();
for (var i = 1; i < cnt + 1; i++) {
document.querySelector("#digits > span:nth-child(" + i + ")").innerHTML = digit[i];
if (spot[i - 1] < spot[i]) {
toggleDigit(i, "up");
} else if (spot[i - 1] > spot[i]) {
toggleDigit(i, "down");
} else if (spot[i - 1] == spot[i] && i - 1 > 0) {
if (document.querySelector("#digits > span:nth-child(" + (i - 1) + ")").className == "digits_moved_up") {
toggleDigit(i, "up");
} else if (document.querySelector("#digits > span:nth-child(" + (i - 1) + ")").className == "digits_moved_down") {
toggleDigit(i, "down");
}
}
}
};
};
};
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: false,
theme: "light2",
title: {
titleFontSize: 0,
text: ""
},
toolTip: {
enabled: true,
animationEnabled: true,
borderColor: "#ccc",
borderThickness: 1,
fontColor: "#000",
content: "{y}"
},
axisX: {
includeZero: false,
titleFontSize: 0,
labelFontSize: 0,
gridThickness: 0,
tickLength: 0,
lineThickness: 0
},
axisY: {
includeZero: false,
titleFontSize: 0,
labelFontSize: 0,
gridThickness: 0,
tickLength: 0,
lineThickness: 0
},
data: [{
type: "spline",
lineColor: "#ccc",
lineThickness: 2,
markerType: "none",
markerSize: 5,
markerBorderThickness: 0,
dataPoints: dps
}]
});
e.preventDefault()
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Asim chart</title>
<style>
body {
margin: 0;
padding: 0 10px;
font-size: 16px;
text-align: center;
font-family: "Arial", sans-serif;
}
h1 {
font-size: 34px;
}
.menu {
margin-bottom: 16px;
display: flex;
}
.menu span {
padding: 3px 0;
flex-basis: auto;
flex-grow: 1;
text-align: center;
font-size: 16px;
border-radius: 5px;
color: #fff;
background-color: #666666;
}
.menu span:hover {
background: #191919;
}
span.menu-active {
background: #191919;
}
.digits {
margin-bottom: 20px;
display: flex;
}
.disclaimer {
font-size: 11px;
text-align: center;
font-family: "Arial", sans-serif;
color: #707070;
}
.digits span {
padding: 25px 0;
flex-basis: auto;
flex-grow: 1;
text-align: center;
font-size: 24px;
border-radius: 15px;
color: #fff;
}
.digits_moved_down {
background-color: #c03;
}
.digits_moved_up {
background-color: #29abe2;
}
.chartContainer {
min-height: 350px;
min-width: 50px;
}
</style>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body class="EN">
<h1>charts</h1>
<h3>charts difference</h3>
<div class="menu">
<span class="" title="R_100">100</span>
<span class="menu-active" title="R_10">10</span>
<span class="" title="R_25">25</span>
<span class="" title="R_50">50</span>
<span class="" title="R_75">75</span>
<span class="" title="RDBEAR">ODD/EVEN</span>
<span class="" title="RDBULL">MATCH/DIFFERS</span>
</div>
<p>Charts might take up to 30 secs to load.. please wait...</p>
<div id="digits" class="digits">
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
<span class="_"></span>
</div>
<div class="chartContainer" id="chartContainer"></div>
<div class="disclaimer">
</div>
</body>
</html>

How to trigger click on canvas object and DOM element that is placed on top of object at the same time?

I have some circles that can be added to a fabricjs canvas. Each circle is an object, while outside my javascript code I have a DOM element, that looks like this:
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
This element triggers a tooltip with Tippjs (a js tooltip package), that has the following code (don't mind the each loop, I should also mention below code is outside the canvas function):
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
Inside my function where I declare everything for the canvas, I have the following code to place the DOM element on top of the canvas object:
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
This works, and the tooltip shows when clicked, but in my canvas function I also have a click function which toggles an image for a specific circle when clicked. I need both to trigger at the same time when the circle is clicked, now when I click a circle, the image appears, but only after I click a second time, the tooltip appears too, not at the same first click.
Removing the image by clicking a second time also doesn't work untill I click on another circle and then click back on the previously clicked circle.
The strange thing is, when I remove one of the two functions (tooltip click, or image toggle click) it works instant, but together only the image toggle works right away but the tooltip only after a second click. Why is that?
The entire code can be seen here (click the small circles to test): https://codepen.io/twan2020/pen/jOVaWMm
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</body>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
for (const ho of canvas.getObjects()) {
// check for 'hotspot' class
if (ho.class && ho.class === 'hotspot') {
ho.on('mousedown', () => {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default"
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
// image was previously loaded
for (const o of canvas.getObjects()) {
// find the correct image on the canvas
if (o.id && o.id === 'img-' + ho.name) {
// toggle the visible property
o.visible = !o.visible;
break;
}
}
}
positionBtn(ho);
});
}
}
})();
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
</script>
</html>
Also, is it possible to attach different tooltips to each dot/circle?

The reason why it didn't work is that you have just 1 DIV hotspot and you move this hotspot on mousedown and expect it to trigger the onclick event afterward which doesn't work. The reason why it works on second click is that the hotspot it now there.
The solution is to have the same amount of DIV as you have hotspot. This allows you to have unique popup message. Currently it displays the same message for each hotspot.
There is an onShow(instance), and onHide(instance) for the tippy property which allows you to carryout extra functionality when these hotspot are clicked on. In your case you want to load images related to the selected hotspot. This eliminate having two events setup.
There was also a problem toggling images. I fixed this but I am not 100% certain it is working how you would like this to work.
Also you had HTML tags outside the <body> tag and HTML content aren't supposed to exist outside body.
I kept most of your original code as much as I can.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
</head>
<body>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent1 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 1
</div>
</span>
<span id="cirkel2" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent2 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 2
</div>
</span>
<span id="cirkel3" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;position:absolute;cursor:pointer;">
<div class="tooltipcontent3 tooltipcontent darktext tooltippadding" style="position:relative;">
Message 3
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj, index) {
var absCoords = canvas.getAbsoluteCoords(obj);
var element = document.getElementById('cirkel'+index);
element.style.left = (absCoords.left - btnWidth / 10) + 'px';
element.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
canvas.getObjects().forEach(function(ho, index) {
positionBtn(ho, index + 1);
});
$( ".carttip" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'click',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
onShow(instance) {
canvas.getObjects().forEach(function(ho, index) {
if (ho.class && ho.class === 'hotspot') {
if (instance.id == index + 1) {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default",
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
printzelf.trippyHotspotImage = true;
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
for (const o of canvas.getObjects()) {
if (o.id && o.id === 'img-' + ho.name) {
o.visible = true;
break;
}
}
canvas.renderAll();
}
}
}
});
},
onHide(instance) {
for (const o of canvas.getObjects()) {
if (o.trippyHotspotImage) {
o.visible = false;
}
}
canvas.renderAll();
},
content: function (reference) {
return reference.querySelector('.tooltipcontent' + (i + 1));
}
});
});
})();
</script>
</body>
</html>

It looks like the first time the click event isn't fired right after the mousedown one the first time. The framework you use seems to prevent this because a process (by the listener) is performed.
(It may be related to event propagation but at this time I still didn't find out how to prevent a click event to be fired after a mouseup.)
What I would call a workaround: to display the tool tip in the same click, i.e. a mousedown event followed by a mouseup one, you can set mouseup value for the trigger property, which displays the tool tip:
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'mouseup', /* <-- here */
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
The mouseup event will be fired if the mousedown occurred on the circle.
Working snippet.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<base href="//printzelf.nl/new/">
<title>Image test</title>
<link rel="stylesheet" href="https://unpkg.com/tippy.js#6/animations/scale-subtle.css"/>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<style media="screen">
.tippy-box {
width: 100%!important;
text-align: center;
background-color: #fff!important;
color: #fff!important;
box-shadow: 3px 2px 15px 6px rgb(0 0 0 / 10%);
}
.darktext {
color: #383838;
font-family: Panton;
font-size: 15px;
}
.tooltippadding {
padding: 15px;
}
body .tippy-arrow {
color: #fff!important;
}
</style>
<img id="background" src="https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg" alt="" style="display:none;">
<div class="canvas-container" style="width: 600px; height: 500px; position: relative; user-select: none;">
<canvas id="c" width="600" height="500" class="lower-canvas" style="border:1px solid red;position: absolute; width: 600px; height: 500px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
</div>
</body>
<span id="cirkel1" class="carttip inlineflexmenu" style="border-radius:100%;width: 25px;height:25px;z-index:9999999;position:absolute;cursor:pointer;">
<div class="tooltipcontent darktext tooltippadding" style="position:relative;">
Testtest
</div>
</span>
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<script type="text/javascript" src="assets/js/fabric.js"></script>
<script type="text/javascript">
(function() {
var myImg = document.querySelector("#background");
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
var source = document.getElementById('background').src;
var canvas = new fabric.Canvas('c');
canvas.hoverCursor = 'pointer';
canvas.selection = false;
canvas.setDimensions({ width: realWidth, height: realHeight });
var img = new Image();
// use a load callback to add image to canvas.
img.src = 'https://static01.nyt.com/images/2019/05/29/realestate/00skyline-south4/88ce0191bfc249b6aae1b472158cccc4-superJumbo.jpg';
canvas.setBackgroundImage(source, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
const hotspots = [
{
top: 140,
left: 230,
radius: 10,
fill: '#009fe3',
id: 'cirkel1',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 300,
imgheight: 200,
imgwidth: 200,
tooltipid: 'cirkel1',
imgUrl: 'https://printzelf.nl/new/assets/images/logo_gewoon.png'
},
{
top: 240,
left: 530,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 700,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i1.wp.com/nypost.com/wp-content/uploads/sites/2/2020/04/pugs-coronavirus.jpg'
},
{
top: 240,
left: 730,
radius: 10,
fill: '#009fe3',
id: 'cirkel2',
hoverCursor: 'pointer',
selectable: false,
imgtop: 200,
imgleft: 800,
imgheight: 200,
imgwidth: 200,
imgUrl: 'https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpg?width=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d'
}
];
const loadedImages = [];
for (let [idx, props] of hotspots.entries()) {
let c = new fabric.Circle(props);
c.class = 'hotspot';
c.name = 'hotspot-' + idx;
canvas.add(c);
}
fabric.Canvas.prototype.getAbsoluteCoords = function(object) {
return {
left: object.left + this._offset.left,
top: object.top + this._offset.top
};
}
var cirkel1tooltip = document.getElementById('cirkel1'),
btnWidth = 40,
btnHeight = 40;
function positionBtn(obj) {
var absCoords = canvas.getAbsoluteCoords(obj);
cirkel1tooltip.style.left = (absCoords.left - btnWidth / 10) + 'px';
cirkel1tooltip.style.top = (absCoords.top - btnHeight / 10) + 'px';
}
for (const ho of canvas.getObjects()) {
// check for 'hotspot' class
if (ho.class && ho.class === 'hotspot') {
ho.on('mousedown', () => {
// check if image was previously loaded
if (loadedImages.indexOf(ho.name) < 0) {
// image is not in the array
// so it needs to be loaded
// prepare the image properties
let imgProps = {
width: ho.imgwidth,
height: ho.imgheight,
left: ho.imgleft,
top: ho.imgtop,
scaleX: .25,
scaleY: .25,
selectable: false,
id: 'img-' + ho.name,
hoverCursor: "default"
};
var printzelfImg = new Image();
printzelfImg.onload = function (img) {
var printzelf = new fabric.Image(printzelfImg, imgProps);
canvas.add(printzelf);
};
printzelfImg.src = ho.imgUrl;
// update the `loadedImages` array
loadedImages.push(ho.name);
} else {
// image was previously loaded
for (const o of canvas.getObjects()) {
// find the correct image on the canvas
if (o.id && o.id === 'img-' + ho.name) {
// toggle the visible property
o.visible = !o.visible;
break;
}
}
}
positionBtn(ho);
});
}
}
})();
$( "#cirkel1" ).each(function( i ) {
tippy(this, {
theme: 'blue',
trigger: 'mouseup',
allowHTML: true,
placement: 'right',
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
</script>
</html>

Saving a Canvas as Image Works as Expected but Image is Very Pixelated

I have been tinkering with what follows, and after scouring the web I'm turning up short for how to make the captured image clearer; in brief, the problem I have is that the downloaded image is very choppy.
var canvas = [],
image;
var mainCanvas;
mainCanvas = new fabric.Canvas('c0');
for (i = 1; i <= 3; i++) {
canvas[i] = new fabric.StaticCanvas('sc' + i);
}
function addText() {
var text = new fabric.IText('Type here...', {
fontSize: 27,
top: 10,
left: 10,
});
mainCanvas.add(text);
}
var rect = new fabric.Rect({
fill: '#ff0000',
width: 100,
height: 100,
id: 1
});
var circle = new fabric.Circle({
fill: '#ffff00',
radius: 50,
left: 150,
top: 150,
originX: 'center',
originY: 'center',
id: 2
});
mainCanvas.on('object:added', onModified);
mainCanvas.on('object:modified', onModified);
mainCanvas.on('object:scaling', onModified);
mainCanvas.on('object:moving', onModified);
mainCanvas.add(rect, circle);
function onModified(option) {
var ob = option.target;
var index = mainCanvas.getObjects().indexOf(ob);
ob.clone(function(obj) {
for (i = 1; i <= 3; i++) {
canvas[i].insertAt(obj, index, true);
}
});
};
$('#update').click(function() {
updateCanvas();
});
function updateCanvas() {
var json = JSON.stringify(mainCanvas);
for (i = 1; i <= 3; i++) {
canvas[i].loadFromJSON(json);
}
}
// Toggling Images
function replaceImage(imgUrl) {
if (!isImageLoaded) return; //return if initial image not loaded
image.setSrc(imgUrl, function() {
mainCanvas.renderAll();
updateCanvas();
},{ crossOrigin: 'anonymous' } );
}
// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
isImageLoaded = true;
image = img.set({
selectable: false,
evented: false,
});
mainCanvas.add(image);
mainCanvas.sendToBack(image);
updateCanvas();
},{ crossOrigin: 'anonymous' });
$('#save').click(function() {
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'myfile.jpg';
a.click();
}
})
});
html * {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
}
canvas {
margin: 0px;
display: block;
padding: 0;
}
td,
tr {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
#imagesave {
background-color: white;
height: 637.5px;
width: 825px;
padding-left: 75px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas#1.0.0-rc.5/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick="addText();" class="dropdown-item">Add Text</button><button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/TIINd6E.png')">Hands Pic</button>
<div id="imagesave">
<table>
<tr>
<td>
<canvas id="c0" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc1" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc2" width="187.5" height="636"></canvas>
</td>
<td>
<canvas id="sc3" width="187.5" height="636"></canvas>
</td>
</tr>
</table>
</div>
I have tried updating my various libraries without much luck. What can I do to sharpen the end result (downloaded image)? Or maybe another library that I should try using?

Here is one of the ways to achieve it. It is a simple canvas with a sample text, circle, rectangle, and an image and which you can export to a .png file, feel free to change the format to .jpeg, it will work as well.
var mainCanvas = new fabric.Canvas('canvas');
// Add a rectange
var rect = new fabric.Rect({
fill: '#ff0000',
width: 100,
height: 100,
id: 1
});
mainCanvas.add(rect);
// Add a circle
var circle = new fabric.Circle({
fill: '#ffff00',
radius: 50,
left: 150,
top: 150,
originX: 'center',
originY: 'center',
id: 2
});
mainCanvas.add(circle);
// Add a text
var text = new fabric.IText('Type here...', {
fontSize: 27,
top: 10,
left: 10,
});
mainCanvas.add(text);
// Add an image
fabric.Image.fromURL('https://placekitten.com/200/303', function(img) {
var image = img.set({
selectable: false,
evented: false,
left: 230
});
mainCanvas.add(image);
mainCanvas.sendToBack(image);
mainCanvas.renderAll()
}, { crossOrigin: 'anonymous' });
// Handle click of the save button
var saveButton = document.getElementById('save')
saveButton.addEventListener('click', function (e) {
this.href = mainCanvas.toDataURL({
format: 'png'
});
this.download = 'canvas.png'
}, false)
body {
font-family: sans-serif;
}
canvas {
border: 2px solid #333;
}
#save {
border: 1px solid #333;
text-decoration: none;
color: #fff;
font-weight: bold;
background-color: #333;
padding: 10px;
margin-top: 15px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<div id="app">
<canvas id="canvas" width="500" height="350"></canvas>
Save canvas as image
</div>
You can also check it in this Code Sandbox https://codesandbox.io/s/stackoverflow-60879984-fabricjs-362-export-canvas-as-image-k69er

Objects seem to be appearing behind my canvas

I'm adding objects to my canvas with the fabricjs library (1.7.21) however I am getting this odd behavior where objects are appearing to be behind the canvas. The text is either displayed as white or behind the canvas and I'm not sure why or how. What am I missing here?
var canvas = this.__canvas = new fabric.Canvas('canvas');
responsive();
window.addEventListener('resize', responsive);
function responsive() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var widthn = width - 10;
var heightn = height - 10;
canvas.setDimensions({
width: widthn,
height: heightn
});
}
function clearcan() {
var txt;
if (confirm("Chuck this?")) {
console.log(canvas)
canvas.clear().renderAll();
newleft = 0;
}
}
// Add Text
function Addtext() {
var text = new fabric.IText("Tape & Type...", {
fontSize: 30,
top: 10,
left: 10,
width: 200,
height: 200,
textAlign: "center"
});
canvas.add(text);
canvas.setActiveObject(text);
text.enterEditing();
text.selectAll();
text.renderCursorOrSelection(); // or canvas.renderAll();
}
body {
background-color: #303030;
color: white;
}
canvas {
border-radius: 3px;
border: 1px solid #3030;
margin: 5px;
background-color: white;
}
.btn {
background-color: #3030;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
<button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
Here's my JSFiddle.

Remove background-color from css which applies to both upper and lower canvas. use this
var canvas = this.__canvas = new fabric.Canvas('canvas',{
backgroundColor:'white'
});
It will make lower canvas background white.
DEMO
var canvas = this.__canvas = new fabric.Canvas('canvas',{
backgroundColor:'white'
});
responsive();
window.addEventListener('resize', responsive);
function responsive() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var widthn = width - 10;
var heightn = height - 10;
canvas.setDimensions({
width: widthn,
height: heightn
});
}
function clearcan() {
var txt;
if (confirm("Chuck this?")) {
console.log(canvas)
canvas.clear().renderAll();
newleft = 0;
}
}
// Add Text
function Addtext() {
var text = new fabric.IText("Tape & Type...", {
fontSize: 30,
top: 10,
left: 10,
width: 200,
height: 200,
textAlign: "center"
});
canvas.add(text);
canvas.setActiveObject(text);
text.enterEditing();
text.selectAll();
text.renderCursorOrSelection(); // or canvas.renderAll();
}
body {
background-color: #303030;
color: white;
}
canvas {
border-radius: 3px;
border: 1px solid #3030;
margin: 5px;
//background-color: white;
}
.btn {
background-color: #3030;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
<button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>

Develop Reference

JavaScript is the programming language of the Web.

Click on an fabricjs element is not recognized - javascript

Related

How can I rename an object and render canvas in FabricJS?

canvasjs Charts takes too much time to render

How to trigger click on canvas object and DOM element that is placed on top of object at the same time?

Saving a Canvas as Image Works as Expected but Image is Very Pixelated

Objects seem to be appearing behind my canvas

Categories

Resources