This is an svg image loaded onto the canvas. As you can tell, it looks very much like a raster image. To give a little more context, the light blue box is 1000px by 400px.
Notice also the image of the IText object looks like a raster image instead of a vector image.
Anyone know what's happening here and how to fix it?
---update---
Sorry, this took so long to get out... I got side tracked, but as requested:
<html>
<head>
<title>
Debug Me
</title>
<!--jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--Path to fabric.js-->
<script type='text/javascript' src="./CreekWareJava/fabric.js-3.6.3/dist/fabric.js"></script>
<!--bootstrap related-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" id="canvas_container">
<canvas id="canvas">
Canvas is not supported by this browser! Please upgrade your browser.
</canvas>
</div>
</div>
</div>
<style>
#canvas_container
{
display: flex !important;
justify-content: center !important;
}
canvas
{
position: absolute !important;
height: 100% !important;
width: 100% !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
.canvas-container
{
width: 1000px !important;
height: 400px !important;
border: 5px solid green !important;
position: relative !important;
}
</style>
<script>
window.onload = function()
{
canvas = new fabric.Canvas('canvas');
// – Raman Nikitsenka's proposal
// it shouldn't hurt to have it in here...
fabric.Object.prototype.objectCaching = false;
//Adding some text
addText("Some text");
addImage("http://fabricjs.com/assets/1.svg");
}
function addText(text)
{
var canH = canvas.getHeight() / 2;
var canW = canvas.getWidth() / 2;
var text = new fabric.IText(text, { left: canW, top: canH, fill: "Black", textAlign: 'center' });
text.originX = 'center';
text.originY = 'center';
canvas.add(text);
canvas.bringToFront(text);
canvas.requestRenderAll();
}
function addImage(source)
{
fabric.loadSVGFromURL(source ,function(objects,options) {
var loadedObjects = fabric.util.groupSVGElements(objects, options);
loadedObjects.set({
width: 200,
height: 200
});
canvas.add(loadedObjects);
canvas.renderAll();
});
}
</script>
</body>
</html>
This is the simplified code. As you can tell when you load it, both the svg and the text will come out very blurry. When you resize the dragon or the text, you can tell that it is trying to render it but doesn't do so properly.
Some additional observations:
fabric.js takes the initial canvas element and creates 2 new canvases, then wraps them in a div with a class called .canvas-container. I have a wrapper div for that container with id #canvas_container.
-- Update again... --
I added the following code to the window.onload eventlistener directly after the new fabric object...
for (var i = 0; i < 4; i++)
{
canvas.setHeight(document.getElementById('canvas').height);
canvas.setWidth(document.getElementById('canvas').width);
canvas.requestRenderAll();
console.log(i, "fw", canvas.width, "fh", canvas.height, "cw", document.getElementById("canvas").width, "ch", document.getElementById("canvas").height, "fr", canvas.width / canvas.height, "cr", document.getElementById("canvas").width / document.getElementById("canvas").height);
}
My observations from this are that the more I increase the counter for the loop, the better the image quality and text quality. On the other hand however, it will make the resize boxes and bounding box much thinner and decrease the physical size of the objects. The console will output fabric's canvas's width and height, then the physical html canvas element's width and height, followed by the ratios of each respectively. Thoughts?
