mirror of
https://github.com/wassname/CanvasTextWrapper.git
synced 2026-06-29 15:40:32 +08:00
Vadim Namniak
152 lines
5.3 KiB
HTML
152 lines
5.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<script src="js/CanvasTextWrapper.js"></script>
|
|
<script src="js/options.js"></script>
|
|
<script src="js/examples.js"></script>
|
|
<title>CanvasTextWrapper.js</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<p>CanvasTextWrapper.js</p>
|
|
|
|
<p class="description">
|
|
JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with
|
|
optional alignments and padding.
|
|
</p>
|
|
</header>
|
|
<article>
|
|
<h2>Syntax</h2><br/>
|
|
|
|
<p class="white-block">new CanvasTextWrapper(HTMLCanvasElement, String [, Options]);</p><br/>
|
|
|
|
<div>
|
|
<div class="emph">OPTIONS</div>
|
|
- is a JavaScript object with the following available properties and values:
|
|
</div>
|
|
<ul class="syntax">
|
|
<li>
|
|
<div class="emph">font</div>
|
|
(String) - text style that includes font size in px (REQUIRED), weight & family, etc. specified similarly to CSS
|
|
font shorthand property
|
|
</li>
|
|
<li>
|
|
<div class="emph">textAlign</div>
|
|
(String) - horizontal alignment that applies for each line
|
|
<ul class="values">
|
|
<li>"left"</li>
|
|
<li>"center"</li>
|
|
<li>"right"</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">verticalAlign</div>
|
|
(String) - vertical alignment that applies on a whole block of text
|
|
<ul class="values">
|
|
<li>"top"</li>
|
|
<li>"middle"</li>
|
|
<li>"bottom"</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">paddingX</div>
|
|
(Number) - horizontal padding in pixels set equally on both, left and right sides of
|
|
the element
|
|
</li>
|
|
<li>
|
|
<div class="emph">paddingY</div>
|
|
(Number) - vertical padding in pixels set equally on both, top and bottom sides of the element
|
|
</li>
|
|
<li>
|
|
<div class="emph">fitParent</div>
|
|
(Boolean) - parameter that controls which element to fit
|
|
<ul class="values">
|
|
<li>true - fit canvas parent's width instead of canvas own width</li>
|
|
<li>false - fit canvas width</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">lineBreak</div>
|
|
(String) - text split rule
|
|
<ul class="values">
|
|
<li>"auto" - text fills the element's width going to a new line on a whole word when no more space</li>
|
|
<li>"word" - each next word will be placed on a new line</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">sizeToFill</div>
|
|
(Boolean) - auto font size to fill text container
|
|
<ul class="values">
|
|
<li>"true" - ignore given font size and resize text to fill its padded container</li>
|
|
<li>"false" - use specified or default font size</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<div class="emph">strokeText</div>
|
|
(Boolean) - text outline based on context configuration (make sure it doesn't contradict with other context settings such as globalCompositeOperation, etc)
|
|
<ul class="values">
|
|
<li>"true" - enable text outline</li>
|
|
<li>"false" - enable text outline</li>
|
|
</ul>
|
|
</li>
|
|
<p>
|
|
NOTE: if a single word is too long to fit the width with specified font size, it will be broken into as
|
|
many lines as required on any letter of the word unless <strong>sizeToFill</strong> option is used.
|
|
</p>
|
|
</ul><br/>
|
|
|
|
<h2>Defaults</h2><br/>
|
|
|
|
<p>The default options object which values will be used if a property is not specified or no object is passed:</p>
|
|
|
|
<pre class="white-block">
|
|
{
|
|
font: "18px Arial, sans-serif",
|
|
textAlign: "left",
|
|
verticalAlign: "top",
|
|
paddingX: 0,
|
|
paddingY: 0,
|
|
fitParent: false,
|
|
lineBreak: "auto",
|
|
sizeToFill: false
|
|
}
|
|
</pre>
|
|
<br/><br/>
|
|
|
|
<h2>Usage</h2><br/>
|
|
<p>
|
|
Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before
|
|
using CanvasTextWrapper like so:
|
|
</p>
|
|
|
|
<p class="white-block">
|
|
var canvas = document.createElement('canvas');<br/>
|
|
canvas.width = 300;<br/>
|
|
canvas.height = 250;<br/>
|
|
context = canvas.getContext("2d");<br/>
|
|
context.fillStyle = "rgb(255, 255, 255)";<br/>
|
|
context.fillRect(0, 0, canvas.width, canvas.height);<br/><br/>
|
|
context.globalCompositeOperation = "destination-out";<br/>
|
|
var wrapper = new CanvasTextWrapper(canvas, 'Hello'); // default options will apply<br/>
|
|
</p>
|
|
<br/>
|
|
|
|
<h2>Installation</h2><br/>
|
|
<p class="white-block">
|
|
bower install canvas-text-wrapper<br/>
|
|
npm install canvas-text-wrapper
|
|
</p>
|
|
</article>
|
|
<section>
|
|
<h2>Examples</h2>
|
|
</section>
|
|
<footer>
|
|
← <a href="https://github.com/namniak/CanvasTextWrapper">View on GitHub</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|