# Drawing Text on the Canvas **URL:** \ **Category:** programming\ **Created:** [March 20, 2017, 7:12am UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231 "2017-03-20T07:12:44Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 20, 2017, 7:12am UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231/1 "2017-03-20T07:12:44Z")
by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 19 November 2015 This may come as a shock to you, so I encourage you to be seated for what I am about to say next. The things you can draw on the canvas aren't limited to just lines and shapes. You can also draw text. Not only that, you can extensively customize the text without breaking too much of a sweat. In this tutorial, we will take a look at what all of this means. * * * This is a companion discussion topic for the original entry at [http://www.kirupa.com/canvas/drawing\_text.htm](http://www.kirupa.com/canvas/drawing_text.htm) ---
**Author:** ![Share\_Dost](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/share_dost/32/14327_2.png) [@Share\_Dost](https://forum.kirupa.com/u/Share_Dost)\ **Post date:** [April 25, 2021, 6:19pm UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231/2 "2021-04-25T18:19:38Z")
is it possible to change different colors for each text in a single sentence? if not is the modification is possible to select & change the text color ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 26, 2021, 4:27am UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231/3 "2021-04-26T04:27:11Z")
Yes! This is a great question, and I spent some time fiddling with this. The main thing to note is that each word or phrase you want to format differently has to have its own set of drawing instructions. First, here is the full code to see how I have each word in our text have a different color: ``` Canvas Text Example ``` The code does seem like a lot, but the reason is that (as you can see in the code comments), I had to pull in some code to ensure the content looked good on High DPI screens and some code for generating a random color. The part to focus on is the `drawText` function: ``` function drawText() { ctx.font = "bold 20px Helvetica, Arial, sans-serif"; let xPos = 50; let yPos = 200; let spaceBetweenWord = 5; for (let i = 0; i < words.length; i++) { let word = words[i]; let randomColor = getRandomColor(h_range, s_range, l_range, a_range).hslaValue; ctx.fillStyle = randomColor; ctx.fillText(word, xPos, yPos); let lengthOfWord = ctx.measureText(word); let measureLength = lengthOfWord.width + 20; xPos += measureLength; } } ``` I have the `xPos` variable to track the horizontal position of each word, and I use a loop to treat each word (from the `words` array) as its own drawing _ **activity** _. The challenge is in knowing how far to move my horizontal position with each word we print. That is where the last three lines that involve the `measureText` function come in. The `measureText` function gets the size of the text, and I use the `width` of that size and give it a spacing to increment our `xPos` value by 📏 Let me know if you are unblocked here 🙂 Cheers, Kirupa ---
**Author:** ![Share\_Dost](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/share_dost/32/14327_2.png) [@Share\_Dost](https://forum.kirupa.com/u/Share_Dost)\ **Post date:** [April 27, 2021, 3:15pm UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231/4 "2021-04-27T15:15:22Z")
Sorry, no random color required, but i can set to selected texts within the same text area, or the user can set. like this image: ![Hanuman Jayanti Shubhkamnaye Photo](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/3/3b31de3c6014fff8b947f55fa5142ade1b8db014.jpeg) ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 27, 2021, 6:32pm UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231/5 "2021-04-27T18:32:17Z")
The code I shared will handle that as well. Just replace the random color code with the color you need per text or word. When you say “selected texts”, what do you mean? A user can click on the word and specify their own color? ---
**Author:** ![Share\_Dost](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/share_dost/32/14327_2.png) [@Share\_Dost](https://forum.kirupa.com/u/Share_Dost)\ **Post date:** [April 27, 2021, 6:39pm UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231/6 "2021-04-27T18:39:44Z")
for example on this page, i added canvas - [https://hindimarathistatus.com/text-on-photo/hanuman-jayanti-wishes-maker-hindi/](https://hindimarathistatus.com/text-on-photo/hanuman-jayanti-wishes-maker-hindi/) & want अपना सन्देश लिखे are 3 words. & want user can change different color of all 3 words within the same text area. I don’t want to create 3 different add texts. this frame is set from the admin backend. i will give the same front option to user as well. ---
**Author:** ![Share\_Dost](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/share_dost/32/14327_2.png) [@Share\_Dost](https://forum.kirupa.com/u/Share_Dost)\ **Post date:** [April 27, 2021, 6:55pm UTC](https://forum.kirupa.com/t/drawing-text-on-the-canvas/636231/7 "2021-04-27T18:55:35Z")
Yes