Canvas как изменить цвет текста - Исправление ошибок и поиск оптимальных решений проблем

I am trying to change the color for each line of my messages on canvas, but no success so far. I have tried creating variable for each one of them, but still no luck. any help would be appreciated.

function initiate(){
    var elem = document.getElementById("canvas");
    canvas = elem.getContext("2d");
    addEventListener("mousemove", animation);

    canvas.shadowColor = "rgba(0, 0, 0, 0.5)";
    canvas.shadowOffsetX = 4;
    canvas.shadowOffsetY = 4;
    canvas.shadowBlur = 5;

    canvas.font = "bold 24px verdana, sans-serif ";
    var welcomeMessage ="Welcome to the store!";
    canvas.textAlign = "start";
    canvas.textBaseline = "bottom";
    canvas.fillText(welcomeMessage, 400, 50);

    canvas.font = "bold 14px verdana, sans-serif";
    var message2 = "Your favorite store for videos games and latest DVDs!"; 
    canvas.textAlign = "start";
    canvas.textBaseline = "bottom";
    canvas.fillText(message2, 400, 100);

    canvas.font = "bold 12px verdana, sans-serif";
    canvas.textAlign = "start";
    canvas.textBaseline = "bottom";
    // Create gradient
    //var gradient=canvas.createLinearGradient(0,0,c.width,0);
    //gradient.addColorStop("0","magenta");
    //gradient.addColorStop("0.5","blue");
    //gradient.addColorStop("1.0","red");
    //canvas.fillStyle = gradient;
    canvas.fillText(" <-- Move your mouse aroud to interact with Macroplay smily!", 400, 250);


}

Источник

Рисование текста

« Предыдущая статья
Следующая статья »

После того, как мы увидели в предыдущей главе, как применять стили и цвета, взглянем на написание текста в canvas.

Рисование текста

Контекст рендеринга canvas предоставляет два метода для рисования текста:

fillText(text, x, y [, maxWidth]): Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.
strokeText(text, x, y [, maxWidth]): Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.

Пример `fillText`

Текст вставлен с использованием текущего fillStyle.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.fillText("Hello world", 10, 50);
}

<canvas id="canvas" width="300" height="100"></canvas>

Пример `strokeText`

Текст вставлен с использованием текущего strokeStyle.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

<canvas id="canvas" width="300" height="100"></canvas>

Стилизация текста

В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют ещё несколько свойств, позволяющие настроить вывод текста на canvas:

font = value: Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как CSS-свойство font. По умолчанию — sans-serif высотой 10px.
textAlign = value: Настройка выравнивания текста. Возможные значения: start, end, left, right или center. По умолчанию — start.
textBaseline = value: Настройка выравнивания текста по вертикали. Возможные значения: top, hanging, middle, alphabetic, ideographic, bottom. По умолчанию — alphabetic.
direction = value (en-US): Направление текста. Возможные значения: ltr, rtl, inherit. По умолчанию — inherit.

Эти свойства могут быть вам знакомы если вы работали с CSS.

Изображение от WHATWG ниже показывает различные варианты свойства textBaseline.

Пример textBaseline

Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world!", 0, 100);

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Измерение ширины текста

Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:

measureText(): Возвращает объект TextMetrics (en-US), содержащий ширину текста в пикселах, до отрисовки на canvas.

Пример ниже показывает, как можно измерить ширину текста.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;
}

Примечания

В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы методы API с префиксами для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.

« Предыдущая статья
Следующая статья »

Источник

So in html canvas text can be rendered with methods like the fill text 2d drawing context method. There is also the stroke text method as well that can be used as a replacement of or in addition to the fill text method. There a bunch more methods and properties to the drawing context also that are of interest when working with canvas text, but those two methods are of course good starting points to say the least.

When it comes to the style of text it is sometimes nice to use the two fillText and strokeText methods together where I fill first and then stroke over with another color. This will help make sure that the text will always show up depending on what is going on behind it when rendering. There might be other ways of helping with that, but it is of course one thing that comes to mind when rendering text to a canvas element also.

There is a bit more to know about when it comes to setting the position of text, color, the font size and font family, and so forth of canvas text. There are at least a few properties, and methods that a javaScript developer should be aware of when it comes to using canvas to render text. So lets look at some quick simple examples of working with text and canvas elements for starters. The maybe move on to a few more advanced examples that really get into using canvas text in a project.

1 — Canvas text basic example with fillText

To use the fill text method I just need to gain a reference to a canvas element by one way or another, and also get a reference to the 2d drawing context just like any other canvas project. Once I have a reference to the drawing content I can then set a fill style for the context and then call the fill text method. When calling the fill text method I pass the string that I want to display as the first argument followed by the x and y position that I want to place the text at.

<html>
<head>



  


                       
  



<title>canvas text</title>
</head>
<body>
<canvas id="the-canvas"></canvas>
<script src="basic.js"></script>
</body>
</html>

var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
ctx.fillStyle='red';



  


                       
  



ctx.fillText('hello world', 10, 10);

There is more to cover when it comes to the text base line as well as centering text, and controlling the size and font of text. So now that we have a basic example covered we can now get to those examples as well now.

2 — Setting the canvas text font

There is the canvas font 2d drawing context property that will come into play when I want to set the font size, and font-family of the text. I do so by setting the font property to a string value where I set a pixel value for the text size followed by the string ‘px’ to set the value in pixels. After that I can use a space followed by the web safe font I would like to use for the text such as courier.

var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
ctx.fillStyle='red';
ctx.font = '20px courier';
ctx.fillText('hello world', 0, 20);

3 — Setting Canvas text color with fillStyle and strokeStyle.

The canvas text color can be set a number of ways. There is the fill style and stroke style properties that can be used to set the text color depending on what methods are being used to draw the text. There is also the values that are used for these properties and other canvas drawing context methods that have an impact on canvas text color such as the global alpha property.

var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 270;
var mess = 'Hello World';
ctx.font = '50px arial';
ctx.lineWidth = 3;



  


                       
  



ctx.translate(-0.5, -0.5);
ctx.fillStyle='red';
ctx.fillText(mess, 0, 50);
ctx.strokeStyle='red';
ctx.strokeText(mess, 0, 100);
ctx.fillStyle='red';
ctx.strokeStyle='black';
ctx.fillText(mess, 0, 150);
ctx.strokeText(mess, 0, 150);
ctx.globalAlpha = 0.2;



  


                       
  



ctx.strokeStyle='red';
ctx.strokeText(mess, 0, 200);
ctx.globalAlpha = 1;
ctx.strokeStyle='rgba(255,0,0,0.2)';
ctx.strokeText(mess, 0, 250);

3 — The text base line property

When working with text in the 2d canvas drawing context the canvas text base line property can be used to set the vertical alignment of text when setting the position of a fill text method call. I generally like to set the base line of text to the top property so that the very top of the text is where the y position is that I set when drawing text with the fill text method. However There are also a number of other options when it comes to setting the base line of text in canvas.

var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
var mess = 'Hello',
baseY = 10,
stepX = 30;



  


                       
  



ctx.strokeStyle = 'blue';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, baseY);
ctx.lineTo(canvas.width, baseY);
ctx.stroke();
ctx.fillStyle = 'red';
[
'alphabetic',
'bottom',



  


                       
  



'hanging',
'ideographic',
'middle',
'top'
].forEach(function (baseLineValue, index) {
    ctx.textBaseline = baseLineValue;
    ctx.fillText(mess, stepX * index, baseY);
});

4 — The canvas text align property

The text baseline property is what I would want to use in a canvas project to set the vertical alignment of text. However there is also the question of horizontal alignment also, and for this there is the text align property of the 2d drawing context. For this property there are values such as left right and center that can be used to set how text is to be rendered relative to the x value that is given when using a method like fill text..

var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 640;
canvas.height = 150;
ctx.fillStyle = 'back';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';



  


                       
  



ctx.font = '120px arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Hello World', canvas.width / 2, canvas.height / 2);

5 — Measure text

If I need to measure text metrics there is the measure text context method. Calling the method and passing a text example will return an object that contains values such as width that is the pixel with of the text with the current text settings.

var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 40;
var mess = 'Hello World',
m,
dx = 0;
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='red';
ctx.font = '20px courier';
ctx.textBaseline = 'top';
ctx.textAlign='left';
m = ctx.measureText(mess);
dx = m.width;
ctx.fillText('hello world', canvas.width - dx, 10);

6 — Wrap canvas text

So a common problem that seems to come up a lot with canvas text is being able to wrap text. There is not canvas built in wrap text method that I know of, but the measure text method of the d2 drawing context could be used to make one.

A method could be used to directly draw the text to the canvas, or another method could be used to create an arry of lines. In other words a method that is given a drawing context and then some text, and then splits that text into an array of strings. The array of strings can then be drawn to the canvas by just looping over the array of strings, stepping the y distance for each line.

var wrapText = function (ctx, text, sx, sy, w) {
var words = text.match(/w+/g),
    word,
    lines = [],
    currentLine = '',
    len = words.length,
    wordIndex = 0,
    x = sx,
    y = sy,
    m;
while (wordIndex < len) {
        word = words[wordIndex];
        m = ctx.measureText(word + ' ');
        x += m.width;
if (x + m.width < w) {
            currentLine += word + ' ';
if (wordIndex === len - 1) {
                lines.push(currentLine);
            }
        } else {
            x = sx;
            lines.push(currentLine);
            currentLine = word + ' ';
        }
        wordIndex += 1;
    }
return lines;
};
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
var text = 'So then this is some text that is a little long so it might need to be wraped';
ctx.font = '30px courier';
var lines = wrapText(ctx, text,0,0,canvas.width);
ctx.fillStyle = 'red';
ctx.textBaseline = 'top';
console.log(lines);
lines.forEach(function(line,i){
console.log(line);
    ctx.fillText(line, 0, 40 * i)
});

7 — Canvas text example called text circles

Now that I have all the boring basic stuff out of the way it is time to have some fun and get creative working with canvas text. In this section I worked out a canvas text example that makes use of a module that can be used to create an kind of text circle object. This text circle object has its radius set by the width of the text that is given to it when it is made with a public method. I can then draw the object also with a draw method also given via the modules public api.

7.1 — The text circles module

Here is the text circle module that I worked out for this canvas text example. I have one private method that is used to set the measure and radius properties of a text circle object based on the text given as well as other options such as font size and spacing.

var tc = (function () {
var setMeasueAndRadius = function (tcObj) {
        tcObj.ctx.save();
        tcObj.ctx.font = tcObj.fontSize + 'px ' + tcObj.fontFamily;
        tcObj.m = tcObj.ctx.measureText(tcObj.text);
console.log(tcObj.ctx.font, tcObj.m.width);
        tcObj.r = Math.ceil(tcObj.m.width / 2) + tcObj.space;
        tcObj.ctx.restore();
    };
return {
createTextCircleObject: function (opt) {
            opt = opt || {};
var tcObj = {};
            tcObj.ctx = opt.ctx || document.createElement('canvas').getContext('2d');
            tcObj.text = opt.text || 'text circle';
            tcObj.fontSize = opt.fontSize || 10;
            tcObj.fontFamily = opt.fontFamily || 'arial';
            tcObj.x = opt.x === undefined ? 0 : opt.x;
            tcObj.y = opt.y === undefined ? 0 : opt.y;
            tcObj.h = opt.h === undefined ? 0 : opt.h;
            tcObj.space = opt.space || 0;
            tcObj.textStyles = opt.textStyles || ['red', 'black'];
            tcObj.circleStyles = opt.circleStyles || ['white', 'black'];
            setMeasueAndRadius(tcObj);
return tcObj;
        },
draw: function (ctx, tcObj) {
var styles = [];
            ctx.save();
            ctx.translate(tcObj.x, tcObj.y);
            ctx.rotate(tcObj.h);
            ctx.lineWidth = 3;
            styles = tcObj.circleStyles || [];
            ctx.fillStyle = styles[0] || 'red';
            ctx.strokeStyle = styles[1] || 'black';
            ctx.beginPath();
            ctx.arc(0, 0, tcObj.r, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();
            ctx.lineWidth = 1;
            ctx.font = tcObj.fontSize + 'px ' + tcObj.fontFamily;
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'center';
            styles = tcObj.textStyles || [];
            ctx.fillStyle = styles[0] || 'red';
            ctx.strokeStyle = styles[1] || 'black';
            ctx.fillText(tcObj.text, 0, 0);
            ctx.strokeText(tcObj.text, 0, 0);
            ctx.restore();
        }
    };
}
    ());

7.2 — The modules in action

Now to see this in action with a main html file that links to my text circles module, and makes use of it to create some of these text circle objects. I link to my text circles module with a script tag, and then work out the rest of this example in an additional script tag in the html.

I start out with the example by getting a reference to a canvas element, and drawing context just like I do with any other canvas example. In then however create an array of text circle objects by using map with an array of words and calling my create text circle method in the body of the function that I pass to array map.

<html>
<head>
<title>canvas text</title>
</head>
<body>
<canvas id="the-canvas"></canvas>
<script src="text_circles.js"></script>
<script>
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
var textCircles = ['wow', 'so this is', 'a little cool'].map(function (text) {
var w = canvas.width,
    h = canvas.height,
    qw = w / 4,
    qh = h / 4;
return tc.createTextCircleObject({
ctx: ctx,
x: qw - qw + Math.floor(w * Math.random()),
y: qh - qh + Math.floor(h * Math.random()),
h: Math.PI * 2 * Math.random(),
text: text,
fontSize: 10 + Math.floor(20 * Math.random()),
space: 10
    })
});
textCircles.push(tc.createTextCircleObject({
ctx: ctx,
x: canvas.width / 2,
y: canvas.height / 2,
h: Math.PI / 180 * -45,
text: 'This is fun!',
circleStyles: ['rgba(255,255,255,0.5)', 'rgba(0,0,0,0.8)'],
fontSize: 30,
space: 10
    }));
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
textCircles.forEach(function (tcObj) {
    tc.draw(ctx, tcObj);
});
</script>
</body>
</html>

8 — Wave text canvas text example

Now to get into yet another fun canvas example using canvas text. This example will involve making a module that will create and object that contains an array of objects for each character in a given string. The main object will also contain other properties that are used to update the state of that array of characters. This will allow for making methods that change the state of the properties of the objects in the array of chars so that cool things can be done with canvas text, such as having text wave.

8.1 — The text wave module

Here I have the main text wave module that will return a public API that can be used to create a wave text object, as well as update, and draw the object.

var textWave = (function () {
var makeCharsArray = function (obj) {
var deltaWidth = (obj.fontSize + obj.spacing),
        halfWidth = obj.str.length * deltaWidth / 2;
return obj.str.split('').map(function (ch, i) {
return {
x: i * deltaWidth - halfWidth + obj.fontSize / 2,
y: obj.fontSize / 2 * -1,
ch: ch
            };
        });
    };
var waveChars = function (obj) {
var per = obj.frame / obj.maxFrame;
        obj.chars.map(function (c, i) {
var r = i / obj.chars.length * (Math.PI * 2) + Math.PI * 2 * per;
            c.y = Math.cos(r) * obj.fontSize - obj.fontSize / 2;
return c;
        });
    };
return {
        createObject: function (opt) {
            opt = opt || {};
var obj = {
str: opt.str || 'wiggle',
spacing: opt.spacing === undefined ? 0 : opt.spacing,
fontSize: opt.fontSize || 10,
cx: opt.cx === undefined ? 0 : opt.cx,
cy: opt.cy === undefined ? 0 : opt.cy,
frame: 0,
maxFrame: 50,
fps: 60,
lt: new Date(),
chars: []
            };
            obj.chars = makeCharsArray(obj);
return obj
        },
        updateObject: function (obj, now) {
            now = now || obj.lt;
var t = now - obj.lt,
            sec = t / 1000,
            deltaFrame = Math.floor(obj.fps * sec);
if (deltaFrame >= 1) {
                obj.frame += deltaFrame;
                obj.frame %= obj.maxFrame;
                obj.lt = now;
            }
            waveChars(obj);
        },
        draw: function (ctx, obj) {
            ctx.save();
            ctx.translate(obj.cx, obj.cy);
            ctx.fillStyle = '#00ffff';
            ctx.font = obj.fontSize + 'px courier';
            ctx.textBaseline = 'top';
            ctx.textAlign = 'center';
            obj.chars.forEach(function (c) {
                ctx.fillText(c.ch, c.x, c.y);
            });
            ctx.restore();
        }
    };
}
    ());

8.2 — Demo of text wave

Now for some html and additional javaScript that will make use of the module that I worked out.

<html>
<head>
<title>canvas text</title>
</head>
<body>
<canvas id="the-canvas"></canvas>
<script src="text_wave.js"></script>
<script>
var canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
canvas.width = 320;
canvas.height = 240;
var tw = textWave.createObject({
str: 'hello world',
fontSize: 20,
spacing: 5,
cx: canvas.width / 2,
cy: canvas.height / 2
    });
var loop = function () {
    requestAnimationFrame(loop);
    textWave.updateObject(tw, new Date());
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    textWave.draw(ctx, tw);
};
loop();
</script>
</body>
</html>

The result of this when it is up and running is the text hello world moving up and down in a wave like pattern. Which is a cool little effect that is just scratching the surface with what can be done with canvas, text, and a little javaScript code.

9 — Conclusion

So hopefully this post has helped to shine some light on the whole canvas text situation. Drawing text in canvas is not so hard once you get the hang of it, but it was a little weird at first as things will not work out of the box the same was as what I am used to with plain old HTML. Because canvas is very much an html element another option with text is that I could just use some other type of element outside of the canvas element, but that would be cheating.

Источник

Чтобы вывести текст в элемент <canvas>, используют следующие методы и свойство:

font — свойство, которое определяет шрифт текста
fillText(text,x,y) — рисует «залитый» текст
strokeText(text,x,y) — рисует простой текст без заливки

Используем метод fillText()

Установим шрифт «Arial» размером 30px и нарисуем текст с заливкой в элементе <canvas>:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Используем метод strokeText()

Установим шрифт «Arial» размером 30px и нарисуем текст без заливки в элементе <canvas>:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Добавляем цвет и центрирование текста

Установим шрифт «Comic Sans MS» размером 30px и нарисуем текст с заливкой красного цвета в элементе <canvas>:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

Источник

CanvasRenderingContext2D.fillText()

CanvasRenderingContext2D метод fillText() , части холста 2D API, рисует текстовую строку в указанных координатах, заполняя символы струны с текущим fillStyle . Необязательный параметр позволяет указать максимальную ширину отображаемого текста, которую пользовательский агент будет достигать, уплотняя текст или используя меньший размер шрифта.

Этот метод рисует непосредственно на холст без изменения текущего пути, поэтому любые последующие вызовы fill() или stroke() будут влиять на него.

Текст отображается с использованием конфигурации шрифта и макета текста, как определено свойствами font , textAlign , textBaseline и direction .

Примечание. Чтобы нарисовать очертания символов в строке, вызовите метод контекста strokeText() .

Syntax

fillText(text, x, y)
fillText(text, x, y, maxWidth)

Parameters

text: Строка, указывающая текстовую строку для отображения в контексте. Текст визуализируется с использованием настроек, заданных font , textAlign , textBaseline и direction .
x: Координата по оси x точки,в которой следует начать рисование текста,в пикселях.
y: Координата по оси y базовой линии,с которой начинается рисование текста,в пикселях.
maxWidthOptional: Максимальное количество пикселей в ширину текста может быть один раз отрисовано.Если не указано,то ширина текста не ограничена.Однако,если это значение задано,пользовательский агент настроит кернинг,выберет более горизонтально сжатый шрифт (если он доступен или может быть сгенерирован без потери качества),или уменьшит размер шрифта до меньшего,чтобы подогнать текст под указанную ширину.

Return value

Examples

Рисование заполненного текста

В этом примере слова «Hello world» записываются с использованием fillText() .

HTML

Во-первых,нам нужен холст,чтобы втянуть его.Этот код создает контекст шириной 400 пикселей и шириной 150 пикселей по горизонтали.

<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

Ниже приведен код JavaScript для данного примера.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.font = '50px serif';
ctx.fillText('Hello world', 50, 90);

Этот код получает ссылку на <canvas> , затем получает ссылку на контекст 2D-графики.

С этим в руке, мы устанавливаем font на 50 пикселей высоты «засечки» (используется по умолчанию засечек шрифта), а затем вызвать fillText() , чтобы сделать текст «Hello World» , начиная с координатами (50, 90).

Result

Ограничение размера текста

В этом примере написаны слова «Hello world»,ограничивающие его ширину 140 пикселями.

HTML

<canvas id="canvas" width="400" height="150"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.font = '50px serif';
ctx.fillText('Hello world', 50, 90, 140);

Result

Specifications

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
`fillText`	1	12	3.5	9	≤12.1	4	≤37	18	4	≤12.1	3.2	1.0

Рисование текста

Последнее обновление: 02.05.2016

Наряду с геометрическими фигурами и изображениями canvas позволяет выводить текст. Доля этого вначале надо установить у контекста canvas свойство font:

var canvas = document.getElementById("myCanvas"), 
	context = canvas.getContext("2d");
context.font = "22px Verdana";

Свойство font в качестве значения принимает опредление шрифта. В данном случае это шрифт Verdana высотой 22 пикселя. В качестве шрифтов используются
стандартные шрифты.

Далее мы можем вывести некоторый текст с помощью метода fillText():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas в HTML5</title>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="200" 
			style="background-color:#eee; border:1px solid #ccc;">
			Ваш браузер не поддерживает Canvas
		</canvas>
		<script>
			var canvas = document.getElementById("myCanvas"), 
				context = canvas.getContext("2d");
			context.font = "22px Verdana";
			context.fillText("Hello HTML5!", 20, 50);
		</script>
	</body>
</html>

Метод fillText(text, x, y) принимает три параметра: выводимый текст и x и y координаты точки, с которой выводится текст.

Для вывода текста можно также применять метод strokeText(), который создает границу для выводимых символов:

var canvas = document.getElementById("myCanvas"), 
	context = canvas.getContext("2d");
context.font = "30px Verdana";
context.strokeStyle = "red";
context.strokeText("Hello HTML5!", 20, 50);

Свойство textAlign

Свойство textAlign позволяет выровнить текст относительно одной из сторон. Это свойство может принимать следующие значения:

left: текст начинается с указанной позиции
right: текст завершается до указанной позиции
center: текст располагается по центру относительно указанной позиции
start: значение по умолчанию, текст начинается с указанной позиции
end: текст завершается до указанной позиции

var canvas = document.getElementById("myCanvas"), 
	context = canvas.getContext("2d");
context.font = "22px Verdana";
context.textAlign = "right";
context.fillText("Right Text", 120, 30);
context.textAlign = "left";
context.fillText("Left Text", 120, 60);
context.textAlign = "center";
context.fillText("Center Text", 120, 90);
context.textAlign = "start";
context.fillText("Start Text", 120, 120);
context.textAlign = "end";
context.fillText("End Text", 120, 150);

Свойство lineWidth

Свойство lineWidth задает ширину линии текста:

var canvas = document.getElementById("myCanvas"), 
	context = canvas.getContext("2d");
context.font = "30px Verdana";
context.strokeStyle = "red";
			
context.lineWidth = 2;
context.strokeText("Hello HTML5!", 20, 50);

Свойство textBaseline

Свойство textBaseline задает выравнивание текста по базовой линии. Оно может принимать следующие значения:

top
middle
bottom
alphabetic
hanging
ideographic

var canvas = document.getElementById("myCanvas"), 
	context = canvas.getContext("2d");
context.font = "18px Verdana";
context.textBaseline="top";
context.fillText("Top",15,100);
context.textBaseline="bottom";
context.fillText("Bottom",60,100);
context.textBaseline="middle";
context.fillText("Middle",130,100);
context.textBaseline="alphabetic";
context.fillText("Alphabetic",200,100);
context.textBaseline="hanging";
context.fillText("Hanging",300,100);

Определение ширины текста

С помощью метода measureText() можно определить ширину текста на canvase:

var canvas = document.getElementById("myCanvas"), 
	context = canvas.getContext("2d");
context.font = "18px Verdana";
var text = context.measureText("Hello HTML5");
alert(text.width);

Источник

Рисование текста

Рисование текста

Пример fillText

Пример strokeText

Стилизация текста

Пример textBaseline

Измерение ширины текста

Примечания

1 — Canvas text basic example with fillText

2 — Setting the canvas text font

3 — Setting Canvas text color with fillStyle and strokeStyle.

3 — The text base line property

4 — The canvas text align property

5 — Measure text

6 — Wrap canvas text

7 — Canvas text example called text circles

7.1 — The text circles module

7.2 — The modules in action

8 — Wave text canvas text example

8.1 — The text wave module

8.2 — Demo of text wave

9 — Conclusion

Используем метод fillText()

Используем метод strokeText()

Добавляем цвет и центрирование текста

CanvasRenderingContext2D.fillText()

Syntax

Parameters

Return value

Examples

Рисование заполненного текста

HTML

JavaScript

Result

Ограничение размера текста

HTML

JavaScript

Result

Specifications

Browser compatibility

See also

Web APIs

Рисование текста

Свойство textAlign

Свойство lineWidth

Свойство textBaseline

Определение ширины текста

Пример `fillText`

Пример `strokeText`