चार्ट.जेएस का उपयोग करके डोनट चार्ट के अंदर पाठ कैसे जोड़ें?
जवाबों:
आपको कोड को संशोधित करना होगा: जैसे chart.Doughnut.defaults
labelFontFamily : "Arial",
labelFontStyle : "normal",
labelFontSize : 24,
labelFontColor : "#666"और फिर फंक्शन में drawPieSegments
ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);
इस पुल को देखें: https://github.com/nnnick/Chart.js/pull/35
यहाँ एक fiddle http://jsfiddle.net/mayankcpdixit/6xV78/ समान लागू किया जा रहा है।
कोई भी अन्य उत्तर पाठ की मात्रा और डोनट के आकार के आधार पर पाठ का आकार नहीं बदलता है। यहां एक छोटी स्क्रिप्ट है जिसका उपयोग आप बीच में पाठ की किसी भी मात्रा को गतिशील रूप से करने के लिए कर सकते हैं, और यह स्वचालित रूप से इसे आकार देगा।
उदाहरण: http://jsfiddle.net/kdvuxbtj/
यह डोनट आकार में किसी भी राशि को डोनट के लिए एकदम सही लेगा। किनारों को छूने से बचने के लिए आप सर्कल के अंदर के व्यास के प्रतिशत के रूप में एक साइड-पेडिंग सेट कर सकते हैं। यदि आप इसे सेट नहीं करते हैं, तो यह 20 पर डिफ़ॉल्ट होगा। आप रंग, फ़ॉन्ट और पाठ भी। प्लगइन बाकी का ख्याल रखता है।
प्लगइन कोड 30px के आधार फ़ॉन्ट आकार के साथ शुरू होगा। वहाँ से यह पाठ की चौड़ाई की जाँच करेगा और इसे वृत्त की त्रिज्या के खिलाफ तुलना करेगा और इसे सर्कल / पाठ चौड़ाई अनुपात के आधार पर आकार देगा।
इसका डिफ़ॉल्ट न्यूनतम फ़ॉन्ट आकार 20px है। यदि पाठ न्यूनतम फ़ॉन्ट आकार में सीमा से अधिक है, तो यह पाठ को लपेट देगा। पाठ को लपेटते समय डिफ़ॉल्ट पंक्ति की ऊंचाई 25px है, लेकिन आप इसे बदल सकते हैं। यदि आप डिफ़ॉल्ट न्यूनतम फ़ॉन्ट आकार को गलत पर सेट करते हैं, तो पाठ असीम रूप से छोटा हो जाएगा और लपेट नहीं जाएगा।
इसमें डिफ़ॉल्ट अधिकतम फॉन्ट का आकार 75px है यदि पर्याप्त पाठ नहीं है और लेटरिंग बहुत बड़ी है।
यह प्लगइन कोड है
Chart.pluginService.register({
beforeDraw: function(chart) {
if (chart.config.options.elements.center) {
// Get ctx from string
var ctx = chart.chart.ctx;
// Get options from the center object in options
var centerConfig = chart.config.options.elements.center;
var fontStyle = centerConfig.fontStyle || 'Arial';
var txt = centerConfig.text;
var color = centerConfig.color || '#000';
var maxFontSize = centerConfig.maxFontSize || 75;
var sidePadding = centerConfig.sidePadding || 20;
var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
// Start with a base font of 30px
ctx.font = "30px " + fontStyle;
// Get the width of the string and also the width of the element minus 10 to give it 5px side padding
var stringWidth = ctx.measureText(txt).width;
var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
// Find out how much the font can grow in width.
var widthRatio = elementWidth / stringWidth;
var newFontSize = Math.floor(30 * widthRatio);
var elementHeight = (chart.innerRadius * 2);
// Pick a new font size so it will not be larger than the height of label.
var fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
var minFontSize = centerConfig.minFontSize;
var lineHeight = centerConfig.lineHeight || 25;
var wrapText = false;
if (minFontSize === undefined) {
minFontSize = 20;
}
if (minFontSize && fontSizeToUse < minFontSize) {
fontSizeToUse = minFontSize;
wrapText = true;
}
// Set font settings to draw it correctly.
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = fontSizeToUse + "px " + fontStyle;
ctx.fillStyle = color;
if (!wrapText) {
ctx.fillText(txt, centerX, centerY);
return;
}
var words = txt.split(' ');
var line = '';
var lines = [];
// Break words up into multiple lines if necessary
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = ctx.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > elementWidth && n > 0) {
lines.push(line);
line = words[n] + ' ';
} else {
line = testLine;
}
}
// Move the center up depending on line height and number of lines
centerY -= (lines.length / 2) * lineHeight;
for (var n = 0; n < lines.length; n++) {
ctx.fillText(lines[n], centerX, centerY);
centerY += lineHeight;
}
//Draw text in center
ctx.fillText(line, centerX, centerY);
}
}
});और आप अपने चार्ट ऑब्जेक्ट में निम्न विकल्पों का उपयोग करते हैं
options: {
elements: {
center: {
text: 'Red is 2/3 the total numbers',
color: '#FF6384', // Default is #000000
fontStyle: 'Arial', // Default is Arial
sidePadding: 20, // Default is 20 (as a percentage)
minFontSize: 20, // Default is 20 (in px), set to false and text will not wrap.
lineHeight: 25 // Default is 25 (in px), used for when text wraps
}
}
}इस समाधान में प्रयुक्त गणित की मदद के लिए @ जेना स्लोन को श्रेय ।
यहां ऊपर के समाधानों की सफाई और संयुक्त उदाहरण दिया गया है - उत्तरदायी (खिड़की का आकार बदलने की कोशिश करें), एनीमेशन आत्म-संरेखण का समर्थन करता है, टूलसेट का समर्थन करता है
https://jsfiddle.net/cmyker/u6rr5moq/
Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
showTooltip: function() {
this.chart.ctx.save();
Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
this.chart.ctx.restore();
},
draw: function() {
Chart.types.Doughnut.prototype.draw.apply(this, arguments);
var width = this.chart.width,
height = this.chart.height;
var fontSize = (height / 114).toFixed(2);
this.chart.ctx.font = fontSize + "em Verdana";
this.chart.ctx.textBaseline = "middle";
var text = "82%",
textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
textY = height / 2;
this.chart.ctx.fillText(text, textX, textY);
}
});
var data = [{
value: 30,
color: "#F7464A"
}, {
value: 50,
color: "#E2EAE9"
}, {
value: 100,
color: "#D4CCC5"
}, {
value: 40,
color: "#949FB1"
}, {
value: 120,
color: "#4D5360"
}];
var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d')).DoughnutTextInside(data, {
responsive: true
});<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<body>
<canvas id="myChart"></canvas>
</body>
</html>अद्यतन 17.06.16:
समान कार्यक्षमता लेकिन चार्ट 2 के संस्करण 2 के लिए:
https://jsfiddle.net/cmyker/ooxdL2vj/
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = "75%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
});
var chart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: data,
options: {
responsive: true,
legend: {
display: false
}
}
});<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>Uncaught TypeError: Cannot read property 'extend' of undefinedकोई विचार मिल रहा है ?
मैं इसे पूरा करने के लिए chart.js कोड को संशोधित करने से बचूंगा, क्योंकि यह नियमित CSS और HTML के साथ बहुत आसान है। यहाँ मेरा समाधान है:
HTML:
<canvas id="productChart1" width="170"></canvas>
<div class="donut-inner">
<h5>47 / 60 st</h5>
<span>(30 / 25 st)</span>
</div>सीएसएस:
.donut-inner {
margin-top: -100px;
margin-bottom: 100px;
}
.donut-inner h5 {
margin-bottom: 5px;
margin-top: 0;
}
.donut-inner span {
font-size: 12px;
}आउटपुट इस तरह दिखता है:
यह भी मेरे अंत में काम कर रहा है ...
<div style="width: 100px; height: 100px; float: left; position: relative;">
<div
style="width: 100%; height: 40px; position: absolute; top: 50%; left: 0; margin-top: -20px; line-height:19px; text-align: center; z-index: 999999999999999">
99%<Br />
Total
</div>
<canvas id="chart-area" width="100" height="100" />
</div>
@ रैप -2-एच उत्तर पर आधार, यहाँ डैशबोर्ड पर डोनट चार्ट पर टेक्स्ट का उपयोग करने के लिए कोड है। इसमें उत्तरदायी विकल्प के लिए गतिशील फ़ॉन्ट-आकार है।
HTML:
<div>text
<canvas id="chart-area" width="300" height="300" style="border:1px solid"/><div>स्क्रिप्ट:
var doughnutData = [
{
value: 100,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#CCCCCC",
highlight: "#5AD3D1",
label: "Green"
}
];
$(document).ready(function(){
var ctx = $('#chart-area').get(0).getContext("2d");
var myDoughnut = new Chart(ctx).Doughnut(doughnutData,{
animation:true,
responsive: true,
showTooltips: false,
percentageInnerCutout : 70,
segmentShowStroke : false,
onAnimationComplete: function() {
var canvasWidthvar = $('#chart-area').width();
var canvasHeight = $('#chart-area').height();
//this constant base on canvasHeight / 2.8em
var constant = 114;
var fontsize = (canvasHeight/constant).toFixed(2);
ctx.font=fontsize +"em Verdana";
ctx.textBaseline="middle";
var total = 0;
$.each(doughnutData,function() {
total += parseInt(this.value,10);
});
var tpercentage = ((doughnutData[0].value/total)*100).toFixed(2)+"%";
var textWidth = ctx.measureText(tpercentage).width;
var txtPosx = Math.round((canvasWidthvar - textWidth)/2);
ctx.fillText(tpercentage, txtPosx, canvasHeight/2);
}
});
});यहाँ विंडो को आकार देने के लिए नमूना code.try। http://jsbin.com/wapono/13/edit
यदि आप इसे उत्तरदायी चाहते हैं तो आप रिश्तेदार / निरपेक्ष स्थिति के साथ सीएसएस का उपयोग कर सकते हैं। साथ ही यह मल्टी-लाइन को आसानी से हैंडल कर सकता है।
https://jsfiddle.net/mgyp0jkk/
<div class="relative">
<canvas id="myChart"></canvas>
<div class="absolute-center text-center">
<p>Some text</p>
<p>Some text</p>
</div>
</div>यह चार्ट.जेएस 2 के लिए Cmyker के अपडेट पर आधारित है (एक अन्य उत्तर के रूप में पोस्ट किया गया है क्योंकि मैं अभी तक टिप्पणी नहीं कर सकता)
Chrome पर टेक्स्ट संरेखण के साथ मेरे पास एक समस्या थी जब किंवदंती प्रदर्शित होती है क्योंकि चार्ट की ऊंचाई में यह शामिल नहीं है, इसलिए इसे बीच में सही ढंग से संरेखित नहीं किया गया है। FontSize और textY की गणना में इसके लिए लेखांकन द्वारा इसे निर्धारित किया गया है।
मैंने एक सेट मान के बजाय विधि के अंदर प्रतिशत की गणना की क्योंकि मेरे पास पृष्ठ पर इनमें से कई हैं। मान लें कि आपके चार्ट में केवल 2 मान हैं (अन्यथा प्रतिशत क्या है? और पहला वह है जिसके लिए आप प्रतिशत दिखाना चाहते हैं। मेरे पास अन्य चार्टों का एक समूह है, इसलिए मैं टाइप = डोनट के लिए एक चेक करता हूं। मैं केवल प्रतिशत दिखाने के लिए डोनट्स का उपयोग कर रहा हूं इसलिए यह मेरे लिए काम करता है।
पाठ का रंग थोड़ा हिट लगता है और इस बात पर निर्भर करता है कि चीजें किस क्रम में चल रही हैं, इत्यादि, इसलिए मैं एक मुद्दे में भाग गया जब यह आकार दिया कि पाठ रंग बदल जाएगा (एक मामले में काले और प्राथमिक रंग के बीच, और द्वितीयक रंग और दूसरे में सफेद) जो भी मौजूदा फिल शैली थी, उसे मैं "सेव" करता हूं, टेक्स्ट (प्राथमिक डेटा के रंग में) को ड्रा करें और फिर पुरानी फिल शैली को पुनर्स्थापित करें। (पुरानी भरण शैली के संरक्षण की आवश्यकता नहीं है, लेकिन आप कभी नहीं जानते।)
https://jsfiddle.net/g733tj8h/
Chart.pluginService.register({
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx,
type = chart.config.type;
if (type == 'doughnut')
{
var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) /
(chart.config.data.datasets[0].data[0] +
chart.config.data.datasets[0].data[1]));
var oldFill = ctx.fillStyle;
var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2);
ctx.restore();
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle"
var text = percent + "%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = (height + chart.chartArea.top) / 2;
ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0];
ctx.fillText(text, textX, textY);
ctx.fillStyle = oldFill;
ctx.save();
}
}
});आप onAnimationCompleteविकल्प में mayankcpdixit का कोड भी चिपका सकते हैं :
// ...
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
onAnimationComplete: function() {
ctx.fillText(data[0].value + "%", 100 - 20, 100, 200);
}
});एनीमेशन के बाद पाठ दिखाया जाएगा
saveविधि का उपयोग करके हो सकता है
मैं 7 jQueryUI स्लाइडर और ChartJs (अंदर गतिशील पाठ के साथ) के साथ एक डेमो बनाता हूं
Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
showTooltip: function() {
this.chart.ctx.save();
Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
this.chart.ctx.restore();
},
draw: function() {
Chart.types.Doughnut.prototype.draw.apply(this, arguments);
var width = this.chart.width,
height = this.chart.height;
var fontSize = (height / 140).toFixed(2);
this.chart.ctx.font = fontSize + "em Verdana";
this.chart.ctx.textBaseline = "middle";
var red = $( "#red" ).slider( "value" ),
green = $( "#green" ).slider( "value" ),
blue = $( "#blue" ).slider( "value" ),
yellow = $( "#yellow" ).slider( "value" ),
sienna = $( "#sienna" ).slider( "value" ),
gold = $( "#gold" ).slider( "value" ),
violet = $( "#violet" ).slider( "value" );
var text = (red+green+blue+yellow+sienna+gold+violet) + " minutes";
var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2);
var textY = height / 2;
this.chart.ctx.fillStyle = '#000000';
this.chart.ctx.fillText(text, textX, textY);
}
});
var ctx = $("#myChart").get(0).getContext("2d");
var myDoughnutChart = new Chart(ctx).DoughnutTextInside(data, {
responsive: false
});
@ rap-2-h और @Ztuons Ch का उत्तर showTooltipsविकल्प के सक्रिय होने की अनुमति नहीं देता है, लेकिन आप जो कर सकते हैं वह एक दूसरा बनाना और परत करना है।canvas वह चार्ट को रेंडर करने के पीछे वस्तु ।
महत्वपूर्ण हिस्सा divs में और कैनवास ऑब्जेक्ट के लिए आवश्यक स्टाइल है ताकि वे एक दूसरे के शीर्ष पर प्रस्तुत करें।
var data = [
{value : 100, color : 'rgba(226,151,093,1)', highlight : 'rgba(226,151,093,0.75)', label : "Sector 1"},
{value : 100, color : 'rgba(214,113,088,1)', highlight : 'rgba(214,113,088,0.75)', label : "Sector 2"},
{value : 100, color : 'rgba(202,097,096,1)', highlight : 'rgba(202,097,096,0.75)', label : "Sector 3"}
]
var options = { showTooltips : true };
var total = 0;
for (i = 0; i < data.length; i++) {
total = total + data[i].value;
}
var chartCtx = $("#canvas").get(0).getContext("2d");
var chart = new Chart(chartCtx).Doughnut(data, options);
var textCtx = $("#text").get(0).getContext("2d");
textCtx.textAlign = "center";
textCtx.textBaseline = "middle";
textCtx.font = "30px sans-serif";
textCtx.fillText(total, 150, 150);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<html>
<body>
<div style="position: relative; width:300px; height:300px;">
<canvas id="text"
style="z-index: 1;
position: absolute;
left: 0px;
top: 0px;"
height="300"
width="300"></canvas>
<canvas id="canvas"
style="z-index: 2;
position: absolute;
left: 0px;
top: 0px;"
height="300"
width="300"></canvas>
</div>
</body>
</html>यहां देखें jsfiddle: https://jsfiddle.net/68vxqyak/1/
@Cmyker, चार्ट के लिए बढ़िया समाधान। js v2
एक छोटी सी वृद्धि: यह उचित कैनवास आईडी की जांच करने के लिए समझ में आता है, नीचे संशोधित स्निपेट देखें। अन्यथा पाठ (यानी 75%) पृष्ठ के भीतर अन्य चार्ट प्रकारों के बीच भी प्रदान किया जाता है।
Chart.pluginService.register({
beforeDraw: function(chart) {
if (chart.canvas.id === 'doghnutChart') {
let width = chart.chart.width,
height = chart.chart.outerRadius * 2,
ctx = chart.chart.ctx;
rewardImg.width = 40;
rewardImg.height = 40;
let imageX = Math.round((width - rewardImg.width) / 2),
imageY = (height - rewardImg.height ) / 2;
ctx.drawImage(rewardImg, imageX, imageY, 40, 40);
ctx.save();
}
}
});एक किंवदंती के बाद से (देखें: http://www.chartjs.org/docs/latest/configuration/legend.html ) चार्ट की ऊँचाई को बढ़ाती है, ऊँचाई के लिए मान त्रिज्या द्वारा प्राप्त किया जाना चाहिए।
सबसे पहले, चार्ट को चुनने पर यश! मैं इसे अपनी वर्तमान परियोजनाओं में से एक पर उपयोग कर रहा हूं और मैं इसे पूरी तरह से प्यार करता हूं - यह पूरी तरह से काम करता है।
हालाँकि लेबल / टूलटिप अभी तक लाइब्रेरी का हिस्सा नहीं हैं, फिर भी आप इन तीन पुल अनुरोधों पर एक नज़र डालना चाहते हैं:
और, जैसा कि Cracker0dks का उल्लेख किया गया है, Chart.js उपयोग करता हैcanvas प्रतिपादन के लिए , इसलिए आप सीधे अपने टूलटिप्स को सीधे इसके साथ बातचीत करके लागू कर सकते हैं।
उम्मीद है की यह मदद करेगा।
Alesana का समाधान सामान्य रूप से मेरे लिए बहुत अच्छी तरह से काम करता है, लेकिन अन्य लोगों की तरह, मैं यह निर्दिष्ट करना चाहता था कि लाइन ब्रेक कहां होता है। जब तक पाठ पहले से ही लिपटा जा रहा है , तब तक मैंने '\ n' अक्षरों में रेखाएँ लपेटने के लिए कुछ सरल संशोधन किए । यदि पाठ में कोई '\ n' अक्षर हैं, तो एक अधिक पूर्ण समाधान रैपिंग को बाध्य करेगा, लेकिन मेरे पास उस समय के लिए समय नहीं है जब फॉन्ट साइज़िंग के साथ वह काम कर सके। जब रैपिंग (टालिंग स्पेस से बचा जाता है) तो बदलाव क्षैतिज रूप से थोड़ा बेहतर होता है। कोड के नीचे (मैं अभी तक टिप्पणी पोस्ट नहीं कर सकता)।
यह अच्छा होगा अगर कोई इस प्लग को GitHub पर डाले ...
Chart.pluginService.register({
beforeDraw: function(chart) {
if (chart.config.options.elements.center) {
// Get ctx from string
var ctx = chart.chart.ctx;
// Get options from the center object in options
var centerConfig = chart.config.options.elements.center;
var fontStyle = centerConfig.fontStyle || 'Arial';
var txt = centerConfig.text;
var color = centerConfig.color || '#000';
var maxFontSize = centerConfig.maxFontSize || 75;
var sidePadding = centerConfig.sidePadding || 20;
var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
// Start with a base font of 30px
ctx.font = "30px " + fontStyle;
// Get the width of the string and also the width of the element minus 10 to give it 5px side padding
var stringWidth = ctx.measureText(txt).width;
var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
// Find out how much the font can grow in width.
var widthRatio = elementWidth / stringWidth;
var newFontSize = Math.floor(30 * widthRatio);
var elementHeight = (chart.innerRadius * 2);
// Pick a new font size so it will not be larger than the height of label.
var fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
var minFontSize = centerConfig.minFontSize;
var lineHeight = centerConfig.lineHeight || 25;
var wrapText = false;
if (minFontSize === undefined) {
minFontSize = 20;
}
if (minFontSize && fontSizeToUse < minFontSize) {
fontSizeToUse = minFontSize;
wrapText = true;
}
// Set font settings to draw it correctly.
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = fontSizeToUse + "px " + fontStyle;
ctx.fillStyle = color;
if (!wrapText) {
ctx.fillText(txt, centerX, centerY);
return;
}
var lines = [];
var chunks = txt.split('\n');
for (var m = 0; m < chunks.length; m++) {
var words = chunks[m].split(' ');
var line;
// Break words up into multiple lines if necessary
for (var n = 0; n < words.length; n++) {
var testLine = (n == 0) ? words[n] : line + ' ' + words[n];
var metrics = ctx.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > elementWidth && n > 0) {
lines.push(line);
line = words[n];
} else {
line = testLine;
}
}
lines.push(line);
}
// Move the center up depending on line height and number of lines
centerY -= ((lines.length-1) / 2) * lineHeight;
// All but last line
for (var n = 0; n < lines.length; n++) {
ctx.fillText(lines[n], centerX, centerY);
centerY += lineHeight;
}
}
}
});