Develop Reference

How to set minimum width/height on a fabricjs object?

I've been seen a lot of questions and answers about this but i didn't find anything doing the exact same thing as questioned.
I need a fabricjs object to can be transformed freely anytime but also set a minimum width and height (for example 50px) where the user can't reduce the size more than those parameters.
I've been trying this:
rect.minScaleLimit = 0.5;
But the canvas does not interpret the code line as wanted. If you stablish the minScaleLimit as "2", the rectangle will be setted as double size when you try to move it (and so with numbers bigger than 1, it just multiplies the size with the variable value). And if you set the variable to less than 1 it just does nothing...
Anyone with soulitions?
Thank you

How to generate image of specific real-world size

I need to generate image on which will be lines representing distances between frets on guitar. It is supposed to be printed later and act as mask for marking the frets. Therefore, the distances has to be precise.
How can i generate image of specific size in centimeters / milimeters, so when I print it, it will have same size?
I can use Python / JS / Java / C++

As #Chris G wrote in the comment:
Generating an image is pixel based. If you create an image that has a line every 300 pixels and print it at 300dpi, the lines will be exactly one inch apart. (dpi = dots per inch). You can set the dpi in Photoshop for instance, then make sure the image is printed # 100% scaling. (in case it's not clear: the "digital distance" doesn't matter, since you can always adjust the dpi to achieve a specific millimeter distance in the printout)
For example, if I make an image of size 6*300px and 9*300px and I print it with 300dpi, it will be 6x9 inches on paper.

D3 dynamically vertically align text

I've seen a few post here about using dy to vertically align text, but all of them just pick a random value without explaining it. Surely this value would differ depending on the font size? My text's font size is stored in a variable (fsize), and its value can change depending on other factors. I tried setting .attr("dy", fsize / 2) (not quite exactly that since fsize is a string and in ems, but you get the point), and my text is way off centre. What value should I choose, given a font size of fsize?

"Surely this value would differ depending on the font size?"
if you use 'em' units it shouldn't matter what the font size is as they're a relative-size unit
https://www.w3.org/WAI/GL/css2em.htm
So you can use rules of thumb like .attr("dy", "0.7em") which shifts text y-wards by 70% of the font height

How to get the real height of a text?

Referring go this example
http://jsfiddle.net/uzgJX/
The result is the height of the box containing the text (the one you can see if you select the text with the mouse..) wichi is higher then the real height of the text.
Is there a way to get the real height with jquery or plain js?
In the example I tryed with
text.height()
and
text[0].getBoundingClientRect().height
with no luck, it says 19px instead of 14px

Get the computed font-size for your text element instead:
parseInt(window.getComputedStyle(text[0]).fontSize, 10);
font-size represents the size of an em square for a font. It should be noted that, while most glyphs will stay inside the bounds of an em square, some may exceed those bounds. This doesn't usually occur on the vertical dimentions, though.
Give it a try: http://jsfiddle.net/uzgJX/1/. Tip: screenshot and copy into your favourite image editor, then select the pixels exactly to the height of the text and compare with the value given in the fiddle.

Convert HTML element non-px dimensions to px in (IE issue)

I'm trying to get border width of a particular element.
Getting border width style setting is pretty easy by simply reading if from current calculated style of an element:
var styles = (
document.defaultView && document.defaultView.getComputedStyle ?
document.defaultView.getComputedStyle(de, null) :
de.currentStyle
);
Reading a particular border value is then rather simple by:
var top = styles.borderTopWidth;
var value = parseFloat(top);
This is all fine and dandy (as long as you don't use IE) and I can get top border width in the value variable. But this number relates to pixels only when border width was set in pixels. If it wasn't (was em for instance) than value has the number of that particular dimension.
I have to get an answer to any of these two questions:
How do I always get border width in pixels?
How do I calculate different units into pixels?
Example
I've prepared a jsFiddle example where you can see various dimensions reported by DOM and jQuery. Run it in different browsers and you'll see the difference in IE. All dimansions in Crome are in integer values while Firefox calculates margin and padding in floats while border in integers.
BTW: Margin, border and padding are all set to 2mm.

Most libraries solve this problem for you, as does YUI3 for example.
If you don't want to use those libraries, then at least you can peak at how they do it ;)
http://developer.yahoo.com/yui/3/api/dom-style-ie.js.html
Awnser contained therein.

You can generally get computed pixel sizes using element.offsetWidth and element.offsetHeight. This is somewhat sensitive if you want to support a range of browsers. In that case, use a library. For example, using jQuery you can get guaranteed pixel dimensions with something like this: jQuery("#theID").width().