Develop Reference

html2canvas capturing low quality picture

I am trying to capture a div with canvas inside. it is a tshirt editor. now i am capturing this div with html2canvas and then printing it in pdf using jspdf. Now the problem is that the captured image is of very low quality and blurry. its dpi are very low.
This is the original div picture:
and this is the printed version of that div:
You can see the quality difference between them is huge.
Anyway here is the code of capturing the div and then converting it into pdf
var myimage;
function print() {
window.scrollTo(0, 0);
html2canvas(document.getElementById('shirtDiv')).then(function(canvas) {
myimage = canvas.toDataURL("image/jpeg");
setTimeout(print2, 1);
var doc = new jsPDF();
doc.addImage(myimage, 'JPEG', 35, 20, 130, 155);
doc.save('Test.pdf');
});
}
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255); " >
<img name="tshirtview" id="tshirtFacing" src="img/crew_front.png">
<div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
</div></div>
Please ignore the on-line CSS

Ok i did it because of the similar question asked by someone else in this link but the answer wasn't marked correct because he didn't explained it right maybe. Anyway here is the solution.
var myimage;
function print() {
window.scrollTo(0, 0);
html2canvas(document.getElementById('shirtDiv')[0],{scale:4}).then(function(canvas) {
myimage = canvas.toDataURL("image/jpeg");
var doc = new jsPDF();
doc.addImage(myimage, 'JPEG', 35, 20, 130, 155);
doc.save('Test.pdf');
});
}
The scale property was mentioned everywhere but i was having trouble to apply it. yes i know i am stupid but maybe someone else is like me and this might help them :)
UPDATE VERSION
This HTML2CANVAS solution was still not working good for me because the scale option does increase the target div's size before capturing it but it won't work if you have something inside that div which won't resize e.g in my case it was canvas for my editing tool. Anyway for this i opted for domtoimage and trust me i think that this is the best solution of them all. I didn't had to face any problem of html2canvas for example: need to be at the top of webpage so html2canvas can capture the shot completely and Low dpi problem
Anyway sorry for the story but i thought everyone should know and here is the code
function print() {
var node = document.getElementById('shirtDiv');
var options = {
quality: 0.95
};
domtoimage.toJpeg(node, options).then(function (dataUrl) {
var doc = new jsPDF();
doc.addImage(dataUrl, 'JPEG', -18, 20, 240, 134.12);
doc.save('Test.pdf');
});
}
Cdn for dom to image: https://cdnjs.com/libraries/dom-to-image
Cdn for jspdf: https://cdnjs.com/libraries/jspdf

How can I prevent both vertical and horizontal stretching of contained text while resizing text-based objects in Fabric.js?

I want to be able to scale text-based objects (for example with classes and subclasses of IText, Textbox) without stretching the text inside of the object. The interaction of scaling and moving is on user-side (UI), not programmatically (I am working on a drawing editor).
The behaviour I am looking for is similar to the one in the sticky notes apps: You can scale the paper but this action does not scale your text too.
I have already checked this, but this is only for horizontal prevention: Fabric.js How to resize IText horizontally without stretching the text
This is neither what I want/mean: Fabric.js : How to set a custom size to Text or IText?
I know that a scaling factor different than 1 implies the stretching of the inner text, and that by changing the width and height I can resize the object while keeping the text unscaled, so I tried updating these during scaling using events listeners.
I tried many combinations of the IText,Textbox with some scaling events, like this one:
fbtext.on('scaling', function() {
this.set({
width : this.width * this.scaleX,
height: this.height * this.scaleY,
scaleX: 1,
scaleY: 1,
});
});
I also tried this with Textbox:
fbtext.on('scaling', function() {
this.set({
height: this.height * this.scaleY,
});
});
But nothing worked so far. I am out of ideas.

var canvas = new fabric.Canvas('mycanvas');
let textbox = new fabric.Textbox("Sample text", {
left: 100,
top: 100
});
let lastHeight;
const updateTextSize = () => {
const controlPoint = textbox.__corner;
//mr and ml are the only controlPoints that dont modify textbox height
if( controlPoint && controlPoint != "mr" && controlPoint != "ml"){
lastHeight = textbox.height * textbox.scaleY;
}
textbox.set({
height: lastHeight || textbox.height,
scaleY:1
});
canvas.renderAll();
};
textbox.on('scaling', updateTextSize );
textbox.on('editing:entered', updateTextSize);
canvas.on('text:changed', updateTextSize);
canvas.add(textbox);
canvas {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>
<canvas id="mycanvas" width="400" height="400"></canvas>
Here is a code sample that will let you modify the "sticky note size" without streching out the text

Thanks #Ivan, your solution is working for me, with a small glitch.
When increasing the size of the text box using corners the text is getting stretched and compressed. I haven't found the solution of this yet and have currently implemented a workaround to hide all the corner scaling points.
box.setControlsVisibility({
bl: false,
br: false,
tl: false,
tr: false
});
http://jsfiddle.net/bkgvewh6/
Just to add I am posting this as an answer and not as a comment to your answer as I don't have stack overflow reputation to do so.

place image over another in pdfkit

I m creating a PDF file in nodejs using PDFkit, that contains a background image and an profile image of user. I tried looking through the documentation of pdfkit, but could not find any parameter to make another image float over the previous one.
Is there any solution present to make that happen or do I need to switch to other packages?
Any help would be appreciated.
//Background Image
doc.image(__dirname+'../../../resources/images/' + 'background.jpg',
{
height:400,
width:600,
margin: 0,
padding:0
});
//Image to be floated
doc.image(body,
{
height:200,
width:200,
margin: 0,
padding:0,
absolutePosition: {x: 50, y: 100}
}).moveTo(100, 150);
I expect a image over background but pdfkit is making new image to be pushed down the orignal image.

Can see this was asked a long time ago, but it is definitely doable today. Try this example.
let defaultImageOptions = {
width: 200,
height: 300,
};
// Add background image
doc.image("bg_image.png", 0, 0, defaultImageOptions);
doc.image("front_image.png", 0, 0, defaultImageOptions);

Gridstack - widget's max width bigger than grid width crashes resizing of widget

I'm using gridstack.js (v0.2.6) library for my dashboard view in web application. I tried to implement a possibility to let user change the grid width. Almost everything seems to be working, but I encountered a problem with maxWidth of widgets. Setting widget's maxWidth to bigger value than number of grid columns seems to be crashing resizing of widget. For example, when I set gridWidth = 3 and widget's maxWidth = 5, I can resize widget to max ~1.3 * column width instead of 3 columns.
I provide the most important parts of code:
HTML
<div class="grid-stack grid-stack-3">
</div>
Javascript
Initialization:
var $dashboard = $('.grid-stack');
var columnsNumber = 3;
function initGridStack() {
$dashboard[0].className = "grid-stack grid-stack-" + columnsNumber;
var options = {
cell_height: 200,
vertical_margin: 10,
animate: true,
width: columnsNumber,
draggable: {
handle: '.widget-header',
}
};
$dashboard.gridstack(options);
Adding widget:
// ...
$widget = createWidgetElement()
$dashboard.data('gridstack').addWidget($widget, x, y, width, height, autoposition, minWidth, maxWidth, minHeight, maxHeight);
Question
Has anybody had a similar problem and has any idea how can I handle this? I'll be grateful for any help.

Raphael.js animate of image doesn't repaint in chrome

It seems to happen only when I try to animate an image on Chrome. All I want to do is make an image to move back an forth in Raphaël.js. I created a jsfiddle that illustrates the problem. I'm very sure that it used to work in Chrome since I use it to develop and it seems to be broken in later versions of Chrome. When I change the image to a rect for example it seems to render fine. When you resize the screen that contains the animation it repaints.
http://jsfiddle.net/k69yzz0o/1/
var moveForth = function () {
useControl.animate({x : 38, y: 0}, 900, moveBack);
};
var moveBack = function () {
useControl.animate({x : 0, y: 0}, 600, moveForth);
};
var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();
It only happens in Chrome and I use latest Raphael.js 2.1.2.
How can I resolve this issue?

Yes, there appears to be an issue with Chrome recognizing the rect as dirty, and refusing to repaint it. You can see that it's working by mousing over the area.
I tried the same animation using a Transform rather than using the actual position. Transforming an object evidently correctly tells modern Chrome to redraw that area.
Here it is working:
var moveForth = function () {
useControl.animate({"transform":"T38,0"}, 900, ">", moveBack);
};
var moveBack = function () {
useControl.animate({"transform":""}, 600, "<", moveForth);
};
var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();
I also added some easing (">") to give it a more natural bounce.