namniak/canvas-text-wrapper

Split canvas text into lines on specified rule with optional alignment, padding, and more. Supports HDPI screens.

canvas-text-wrapper's Issues

Return object properties

Hello, thank you for the module! It has been useful!
Though i find it important to make the method return some properties, like for instance the number of lines, which for what i am going to create a fork

Thank you !

Allow new lines

Is there some workaround to allow blank lines in the rendered text? So if the text is derived from a textarea, the user could write over multiple lines, but with a break where required.

Either way, thank you for your work on this.

add License

the license listed in the package.json is MIT, but you should consider adding an explicit license file to the repo

index.d.ts returns void when it should be string[] (lines)

As the title says, the index.d.ts specifies the CanvasTextWrapper method to return void but due to other recent changes it actually returns lines (string[]).

allowNewLine does not work

This doesn't seem to work at all. I've fed canvas-text-wrapper with string literals containing \n \\n \r\n \\r\\n \\\n \\\\n and pretty much every other combination of line breaks. In no cases does it break a line.

Deleting canvas data in mobile devices

when you try to put text on a image it removes the image and puts only text.
I encountered this issue only in mobile devices, works fine on my pc. I was using webpack but I don't think that matters.
It cleans canvas at https://github.com/namniak/canvas-text-wrapper/blob/268a8620ab05336d4355c34cc1b6df6b66c9a061/canvas-text-wrapper.js#LL49C1-L49C13 and it doesn't draw it back.
I simply commented this section:

canvas-text-wrapper/canvas-text-wrapper.js

Lines 37 to 64 in 268a862

	if (opts.renderHDPI && devicePixelRatio > 1) {
	var tempCtx = {};
	// store context settings in a temp object before scaling otherwise they will be lost
	for (var key in context) {
	tempCtx[key] = context[key];
	}
	var canvasWidth = canvas.width;
	var canvasHeight = canvas.height;
	scale = devicePixelRatio;
	canvas.width = canvasWidth * scale;
	canvas.height = canvasHeight * scale;
	canvas.style.width = canvasWidth * scale * 0.5 + 'px';
	canvas.style.height = canvasHeight * scale * 0.5 + 'px';
	// restore context settings
	for (var key in tempCtx) {
	try {
	context[key] = tempCtx[key];
	} catch (e) {
	}
	}
	context.scale(scale, scale);
	}

and it worked.
this is the fork I solved the porblem but I don't know if there is a better solution: https://github.com/Mustafa-eksi/canvas-text-wrapper

Infinite loop under conditions

Hey,

If entering more than 7 letters in a word a space and then another word the script goes into an infinite loop. here are my settings:

var textStyle = "140px narziss-medium";
var textLineHeight = "139px";
var text = "QWE123QWE QWEQWE"

CanvasTextWrapper(canvas, text, {
font: textStyle,
lineHeight: textLineHeight,
textAlign: "center",
verticalAlign: "middle",
paddingX: 40,
paddingY: 40,
lineBreak: "auto",
strokeText: false,
allowNewLine: true
});

Any ideas?

Wrong behavior of the "allowNewLine" option with two or more consecutive line breaks (\n\n)

hi,
there's a problem when you try to put two or more than one line break, one after another, into a text.

a text like this:
Vestibulum ante \n\n ipsum primis in faucibus orci luctus et \n\n ultrices posuere cubilia Curae;

will result in something like this:

Vestibulum ante
ipsum
primis in faucibus orci luctus et
ultrices
posuere cubilia Curae;

while it should be like this:

Vestibulum ante

ipsum primis in faucibus orci luctus et

ultrices posuere cubilia Curae;

notice how, in the first example, we have a line break before and after the first word coming after the double \n.

Just thought it would be nice to have the possibility to use more consecutive line breaks.

Hope this might help to fix the problem.

Support CJK

line breaking improve:

'abc 中文ぢゃ放つびカタカナ조선말'.split(/(\p{sc=Han}|\p{sc=Katakana}|\p{sc=Hiragana}|\p{sc=Hang}|\p{gc=Punctuation})|\s+/gu)

consider not making CanvasTextWrapper a constructor

it looks like the prototype simply has helper functions used at creation, not methods meant to be used. Consider making CanvasTextWrapper simply a function as opposed to a constructor fn. CanvasTextWrappers are not reusable (you construct them once, then never use them again), so it's kind of odd to have to construct them.

'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated.

I'm getting this error from Chrome on my phone (Samsung Galaxy S5 mini (SM-G800F) Android 5.1.1)

'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

Using Chrome version 50.0.2661.89 (Official build) (32-bit)

Bower sees v0.5.1 as the latest version

This is due all the newer tags are created with an additional dot after "v", i.e. v.0.8.2 and Bower is not able to understand that format.

bower canvas-text-wrapper#~0.8.2       not-cached git://github.com/namniak/CanvasTextWrapper.git#~0.8.2
bower canvas-text-wrapper#~0.8.2          resolve git://github.com/namniak/CanvasTextWrapper.git#~0.8.2
bower canvas-text-wrapper#~0.8.2     ENORESTARGET No tag found that was able to satisfy ~0.8.2

Additional error details:
Available versions: 0.5.1, 0.5.0, 0.4.4, 0.4.3, 0.4.1, 0.4.0, 0.3.2, 0.3.1, 0.3.0, 0.2.3, 0.2.0, 0.1.1

This can be fixed by creating tags without dots after "v".

How to position X,Y,Width?

This library looks really cool, however there doesn't appear to be a way to pass in the x, y and maxWidth properties so that I can place the text in the correct location on the canvas. It just seems to work with the whole canvas?

allowNewLine do not work correctly

When a word is wrapped without any spaces in between, all line breaks do not work.

But it works if there are spaces.

Max font size

I would be great to be able to define a maximal font size for the sizeToFill parameter.

So I could put in a text from unknown length and it will look fine with two words and with 20 words.

Do you think that could be a good feature.
The mechanism to find the biggest possible font size seems to be simple and I guess it should be easy to add an maximal size. Right?

I will try it myself

Adding Ellipsis

hello,

I have a function that adds an ellipsis (...) at the end of my canvas text. I was wondering, how would one go about adding that function to your script? Any advice would be much appreciated!

function ellipsis1(context,text1) {
var words = text1.split();
var dot = '...';
var more2 = '';
var maxWidth = 115;
var x = 48;
var y = 28;

        for(var n = 0; n < words.length; n++) {
          var metrics = context.measureText(words);
          var textWidth = metrics.width;
          if (textWidth > maxWidth) {
            more2 = words + dot;
          }
        }
        context.fillText(more2, x, y);
        }

Justified text

Hi, great work. This looks very useful, well done.

Have you had any thoughts about justified text? There could be an option to flex the spaces between words or flex the space between letters so all lines match the same width.

Possible to use with Plain HTML/JS

Is it possible to just include the .js as a script in an html file?

I have tried this but get the following error:

Cannot read property 'hasOwnProperty' of undefined
    at CanvasTextWrapper

don't assign to window

I'm looking to reuse this code, with Browserify. I'd prefer to keep things encapsulated and not expose this to the window object. We should use the pattern:

if ('module' in this && 'exports' in module) {
  module.exports = CanvasTextWrapper;
} else {
  window.CanvasTextWrapper = CanvasTextWrapper;
}

I'll send a PR.