The behavior of the textAlign property is identical to what you might see when aligning text in a word editor: Something you might do every now and then is specify whether your text alignment is left, center, or right using the textAlign property.
#Canvas text fonty how to
If everything worked well, you should now see our text look as follows:ĭoesn't this look much nicer? If you want greater customization of your font, you can specify any of the values that go to the font shorthand property: context.font = " / " įor examples and more details on how to use the font property beyond the two common cases we looked at, head on over to MDN's amazing coverage of this. Once you've added that line, go ahead and preview what you have in your browser.
#Canvas text fonty code
Take the above line of code and add it just before the call to fillText and strokeText as highlighted below: var canvas = document.querySelector("#m圜anvas") Ĭontext.font = "bold 96px Helvetica, Arial, sans-serif" Let's use this in our example to make our text more legible. You can even add a bold or italic modifier to have the text appear bolded or italicized: context.font = "bold 96px Helvetica, Arial, sans-serif" Here is us setting the font property to display some 96 pixel-sized text in Helvetica, Arial, or sans-serif: context.font = "96px Helvetica, Arial, sans-serif" Instead of overwhelming you with everything the font property does, lets look at a few simple (and very common) cases where we just specify the font size and a font family with an optional bold or italic modifier. This property mimics the quite complex CSS-equivalent property of the same name where you can specify all sorts of values to adjust how your text appears. Not to play favorites here, but the most frequently-used property you'll use for adjusting your text's appearance is the font property. We'll look at all of these properties in the next handful of sections. The main awesome property for this is font, but you also have the lesser textAlign, textBaseLine, and direction properties that you can use as well. Yikes! Fortunately, you have a handful of properties that help you to transform our almost unreadable text into something more appealing. By default, your text shows up in a sans-serif font sized at 10 pixels. Our canvas-bound text isn't destined to look like whatever hideous thing we have showing right now. We'll fix that right up in the next section.
That is what our text looks like by default when we don't specify any appearance details. If you preview what you have in your browser, you'll see something that looks as follows: In these two lines, we are telling JavaScript to draw a solidly-filled version of the Canvas! text at (40, 125) and an outline version of the Canvas! text at (40, 275). The first two lines are the standard ones you have for getting at your canvas element's 2d drawing context! The interesting stuff happens with our fillText and strokeText lines: context.fillText("Canvas!", 40, 125) Inside our script tag, go ahead and add the following lines: var canvas = document.querySelector("#m圜anvas") Getting back to our original plan, let's add some code. Just keep this knowledge under your hat for that rare rainy day when you'll need it. There is an optional fourth argument you can specify for setting the maximum width of your text, but that's not something you will use often.
You call them on your drawing context object, and you pass in three arguments: Now, the way you use both of these methods is nearly identical: context.fillText("my text", xPosition, yPosition) Ĭontext.strokeText("my text", xPosition, yPosition) Let's turn all of the English words in the previous section into some sweet code that showcases what strokeText and fillText have to offer. If you don't have such a document, just create a new one with the following markup: Īll this sample does is give you a 550px by 350px canvas element that we will use in the next couple of sections to get our text to appear. To do this, take sure you have an HTML document with a canvas element locked and loaded. Now that you know this, let's wrap up this awkward introduction and get our hands dirty with some code! The fillText method allows you to display a solid / filled-in version of your text instead: With the strokeText method, you end up drawing an outline of your text: BUY ON AMAZON From Text to Pixelsįor getting text to appear in our canvas, we will primarily be using two methods: strokeText and fillText. To kick your canvas skills up a few notches, everything you see here and more (with all its casual clarity!) is available in both paperback and digital editions.
0 kommentar(er)
