Develop Reference

Circle created using Fabric.js generates oval shape on canvas

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());
});

How to "toggle" between IText objects (paragraphs of text) on selection with fabricjs canvas?

I want to be able to select from a dropdown to "toggle" between styled IText paragraphs onto my fabricjs canvas but am having trouble making it happen. I tried borrowing from this, which was to do similarly with images, with no luck:
//oImgObj bread and butter, kudos #grunt
function replaceImage(oImgObj, imgUrl) {
if (!isImageLoaded) return; //return if initial image not loaded
var imgElem = oImgObj._element; //reference to actual image element
imgElem.src = imgUrl; //set image source
imgElem.onload = () => canvas.renderAll(); //render on image load
}
How might I accomplish this with editable blocks of text?

You can set your text to a text object with the attribute text.
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('FabricJs is Awsome',{
left:50,top:50
});
canvas.add(text);
function replace(option){
var val = document.getElementsByTagName('textarea')[0].value;
text.set('text',val);
canvas.renderAll();
}
canvas {
border: blue dotted 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<br>
<textarea></textarea><button onclick='replace()'>Replace</button>

html2canvas not converting html having with gradient style

I am using "html2canvas" + to change html chart to image. when bars are having black color style its gets converted fine. but when html bars having gradient CSS it does not converted. Attaching screenshots here.
html2canvas(elementDom, {[enter image description here][1]
onrendered: function (canvas) {
getCanvas = canvas;
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace('data:image/png;base64,','');
});

CreateJs Canvas resize Bitmap

I'm currently working with createJS canvas. I have an image with a predefined size into a Json file and boxes that are link to an eventListener on "mouseout" and "mouseover").
var stage = new createjs.Stage("testCanvas");
createjs.Touch.enable(stage);
stage.enableMouseOver(10);
Bitmap for the image:
var image = new Image();
image.onload = function () {
var img = new createjs.Bitmap(event.target);
stage.addChild(img);
then i draw my boxes (rectangles):
angular.forEach(..., function(value){
var rectGreen = new createjs.Shape();
rectGreen.graphics.beginFill("green")
.drawRect(
value.shapeDimension....,
value.shapeDimension....,
value.shapeDimension....,
value.shapeDimension....
);
rectGreen.alpha = 0.01;
stage.addChild(rectGreen);
my mouse events:
rectGreen.addEventListener("mouseover", function (event) {
var target = event.target;
target.alpha = 0.35;
stage.update();
});
rectGreen.addEventListener("mouseout", function (event) {
var target = event.target;
target.alpha = 0.01;
stage.update();
});
So, it's working but I have some difficulties with the canvas/image size.
If I don't set any width/heigth to the canvas Html, it results in a
300*150 canvas but the image is not resized so it displays only a
slight piece of the real image.
If i set width and height in the canvas html, (real size is 1700*1133), the image appears only 842*561 and the canvas takes place).
I tried different solution with Setting DIV width and height in JavaScript
but nothing enabled me to set my image correctly, and responsive so that the size of my rectangles adpt to the screen size of the image.

In order to dynamically resize the Canvas to the exact size of the image, you can do this:
//to get a variable reference to the canvas
var canvas = document.getElementById("testCanvas");
//supposing the Bitmap is the variable named 'img'
canvas.width = img.image.width;
canvas.height = img.image.height;
If you have more elements on the screen and the total size is bigger than the image itself, you can add everything on the screen in a container, and then scale the container itself to fit the canvas perfectly, like this:
var container = new createjs.Container();
container.addChild(img, [your other rectangle elements here]);
stage.addChild(container);
//will downscale or upscale the container to fit the canvas
container.scaleX = container.scaleY = canvas.width / img.image.width;

Image size enlarging when drawing it on the Canvas

I have a 46*46 png image . While I use the following code to draw it on the Canvas,the image is getting enlarged.
window.onload = function()
{
drawEx1();
}
var image1 = null;
function drawEx1()
{
image1 = new Image();
image1.src =
"unnamed.png";
image1.addEventListener('load', drawImage1);
}
function drawImage1()
{
if (image1.height > 46)
{
image1.height = 46;
}
context.drawImage(image1, 10, 10,image1.height,image1.height);
}
I have styled the CANVAS using a CSS for appearing it on the center of the browser.
What is it I'm doing wrong here. Please help. Thanks.

Don't use CSS to resize the canvas because it will distort the canvas content--stretching it.
Instead resize the canvas element itself:
<canvas width=100 height=100> or
document.getElementById('mycanvas').width=100;
Good luck with your project!