Hi
I'm drawing text in an HTML5 canvas on top of an image. I want to calculate a font size so that the string will span 200 pixels width.
So basically, is there a way in JavaScript to determine what font size I should use for some string of a certain font for a given width?
Drawing text in Canvas to fit a Maximum line width
-
- Posts: 48
Drawing text in Canvas to fit a Maximum line width
MarPlo
The fillText() method has an optional fourth argument, which is the max width to render the string.
- MDN's documentation says:
maxWidth - the maximum width to draw. If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.
Example:
Demo:
- MDN's documentation says:
maxWidth - the maximum width to draw. If specified, and the string is computed to be wider than this width, the font is adjusted to use a more horizontally condensed font (if one is available or if a reasonably readable one can be synthesized by scaling the current font horizontally) or a smaller font.
Example:
Code: Select all
<canvas width="350" height="200" id="canvas"></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
function drawTxt() {
var w = 150; // max-width of the text line
ctx.font = "38px serif";
ctx.fillText('Hello world', 10, 50, w);
}
drawTxt();
</script>
Similar Topics
-
php maximum upload file size
PHP - MySQL
First post
Dear admin i`m back again with an questionLast post
I wanna use your file upload script
sets maximum file size allowed (in KB). Is it posible to use...
I not have experience with hosting and server settings; but you can try to change those settings in php.ini and see if it works.
- After you make... -
Get and split in php text from text-file
PHP - MySQL
First post
Dear Admin i`m back again with something new...Last post
How can i show into a php document text from an text-file ?
i have this code into the text file...
Hello,
You can use file_get_contents() to get a string with file data.
Then, with explode() you can split that string by the separator you want,... -
Enable text box when checkbox is checked
JavaScript - jQuery - Ajax
First post
Hello,Last post
I have this html code:
<label><input type='checkbox' id='chb1' value='1' />Add text</label><br>
<textarea...
Hello,
1. With javascript, register a 'click' event to the checkbox element.
2. In the function called by that click event check if the checkbox is... -
Add IP address in input text field
PHP - MySQL
First post
Dear admin i `m thankfully for your support `just great`.Last post
With both examples for <input type= text > it shows only string(13) but not the...
Thank you so mutch stupido me i had to use: <?php echo $ip; ?> -
Textarea with buttons for format text and smiles
Scripts from this website
First post
I`m a bit furter with my comment + badword-filter & hashtag-systemLast post
But my problem I can`t see the bbcode I only see HTML tags into my textarea...
In the archive with that JS script there is a file form.html. In that file there are instructions and a demo with textarea and bbcode.
Open that...