I am new to fabric.js, I want to create a circle using fabric and render it on canvas I have done the following code. But this code generates an Oval shaped figure which is not a perfect circle, Please let me know why is this happening.
this.canvasIns = new fabric.Canvas('mySampleCanvas');
var myCircle = new fabric.Circle({
radius:50,
borderColor: 'black',
fill:'#fff'
});
this.canvasIns.add(myCircle);
this.canvasIns.renderAll();
I found the problem due to which I was facing the issue. It was happening because I was dynamically changing the height, width of the canvas using the following code.
Due to which the issue was occurring.
var canvasElement = this.myCanvas.nativeElement;
canvasElement.style.height = canvasElement.nextElementSibling.style.height = this.canvas_css.height;
canvasElement.style.width = canvasElement.nextElementSibling.style.width = this.canvas_css.width;
canvasElement.style.left = canvasElement.nextElementSibling.style.left = this.canvas_css.left;
canvasElement.style.top = canvasElement.nextElementSibling.style.top = this.canvas_css.top;
I removed this code and gave static style to the canvas and its working fine.
Check that the height and width off your html attributes and css are the same. If you use CSS to set the size of the canvas the canvas will be stretched not resized to the CSS Values.
Example:
- Canvas Size: 500:500, your circle: 100:100
- CSS Size: 1000:500
- Canvas size on screen: 1000:500, your circle: 200:100
In my case I solved the problem by adding a <div> around the canvas generated by fabric.js to get the desired width and height values and then setting the canvas size with javascript on pageload:
Html:
<div id="drawingArea">
<canvas id="canvas" class="canvas-layer" height="500" width="500"></canvas>
</div>
Javascript:
var canvas = new fabric.Canvas('canvas');
$(window).on('load', function (e) {
canvas.setHeight($('#drawingArea').height());
canvas.setWidth($('#drawingArea').width());
});
Related
I have a canvas where i have a background image of transparent t-shirt. Now i want to change the color of tshirt dynamically and in order to do that the one can change the color of canvas background and the shirt will adapt to it. my canvas is around 920 Width and 570 height and the background image is 530 width and 630 height and it is in the center of the canvas
Now i only want to change the color of image background so that the extra bar of canvas is not colored
The results that i am getting
The results that i want
What i have tried is tried using overlaycolor image of fabricjs library but none of them are working for me. i tried to give left:190 in setBackgroungColor of Fabric library but that is not working either.
any help in this matter is appreciated
<div id="shirtDiv">
<canvas id="tcanvas"></canvas>
</div>
<script>
var canvas;
var canvas = new fabric.Canvas('tcanvas',{backgroundColor:'red', floodColor:'red'});
canvas.setHeight(570);
canvas.setWidth(926);
canvas.setOverlayImage('https://lh3.googleusercontent.com/proxy/m96GqS_oGOQQPt4TMfxYQtrFfdRN6IcgkMQ-y4t_9DVDpSLsGv-2PXdX_NvjP1ljsgw680RuzZBiURQgzPSnWxmX1hU',canvas.renderAll.bind(canvas),{
top:25,
left:190
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
here is the code in : jsfiddle
Try using fabric.Image.backgroundColor.
Will paint the area of the image of a color ( or a gradient ) before panting the image.
var canvas;
var canvas = new fabric.Canvas('tcanvas');
canvas.setHeight(570);
canvas.setWidth(926);
canvas.setOverlayImage('http://fabricjs.com/assets/printio.png', function() {
canvas.requestRenderAll();
canvas.overlayImage.backgroundColor = 'red';
}, {
top:25,
left:190
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<div id="shirtDiv">
<canvas id="tcanvas"></canvas>
</div>
I am currently having an issue when setting width and height of a svg object in fabricjs. I tried setting it like this
svg.width = 100;
svg.height = 100;
But I am not getting the result I expected. It just crops the svg instead of scaling it. So, how can I set its width and height properly?
Any help will be appreciated. Thanks!
Use scaleToWidth() and scaleToHeight() method to properly set SVG objectÂ*'s* width and height respectively.
:-: working example :-:
var canvas = new fabric.Canvas('fabric-canvas');
fabric.loadSVGFromURL('http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153', function(objects, options) {
var svg = fabric.util.groupSVGElements(objects, options);
svg.left = 50;
svg.top = 50;
svg.scaleToWidth(100);
svg.scaleToHeight(100);
canvas.add(svg);
canvas.renderAll();
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="fabric-canvas" width="200" height="200"></canvas>
I am trying to load an SVG file in canvas using fabric.js:
svg_url2 = "http://localhost/fabric/bozza biglietto-03.svg";
canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL(svg_url2, function(objects) {
canvas.add.apply(canvas, objects);
canvas.renderAll();
The SVG file has an inline image which is rescaled, but when it loads in canvas the image is rendered at its original size.
If I paste the same SVG in the kichensink demo, it's displayed with ist correct dimensions. Am I missing something?
The SVG:
SVG image
Try this:
fabric.loadSVGFromURL(svg_url2, function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});
I should work.
Some issues using Javascript library html2canvas. The problem is that html2canvas is getting "div2" with a transparent (sometimes white) background, I want to include the body background (or is behind this div) on "div2".
<div id="div2" style="width: 150px; height: 50px;"></div>
html2canvas(document.getElementById("div2"), {
onrendered: function(canvas) {
var photostring = canvas.toDataURL("image/png");
console.log(photostring);
}
});
Logically the rendering works from the element you select.
So will not get the background, unless you select the "parent element" or "root element".
I have two solutions:
1 - Using Javascript/Jquery you can capture X and Y position from div#target
then you set background-image and background-position in div#target by X/Y position
2 - You capture <body> with html2canvas, then using canvas/javascript api you crop image by X/Y position and Width/Height from div#target, see example: #242 (comment)
Note: set width/height/x/y in these variables (see example):
var targetDiv = $("#target");
var sourceX = targetDiv.position().left;/*X position from div#target*/
var sourceY = targetDiv.position().top;/*Y position from div#target*/
var sourceWidth = targetDiv.width();/*clientWidth/offsetWidth from div#target*/
var sourceHeight = targetDiv.height();/*clientHeight/offsetHeight from div#target*/
Get background-image in parent/root element:
https://github.com/niklasvh/html2canvas/commit/281e6bbedf9f611846eba3af4d256eb97f608aa2
Crop canvas:
https://github.com/niklasvh/html2canvas/issues/242#issuecomment-20875688
In my html I have an image already loaded:
<img usemap="#prototypeMap" src="../../projects/tcas/TCAS display.jpg" style="z-index: 2;">
Is it possibile create a canvas to modify that image, by javascript?
For example drawing a line in it, changing colours in it (for some pixels) and so on...
EDIT:
I have found a method on Internet but it doesn't works good for me:
var imgElement = document.getElementById('prototypeMap');
var canvas = document.createElement("canvas");
canvas.width = imgElement.offsetWidth;
canvas.height = imgElement.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(imgElement,0,0); //ERROR
The last line give me this error:
TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.
You can try using SVG image tag:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag
And then use the other SVG elements to draw on top.