Draw text with canvas

canvas draw text

Is the embedded text in the drawing software.

critical code

Filltext ("text", x,y): draw a solid text. The first parameter should input the text you want. The x,y coordinates here correspond to the text baseline, and determine the positioning together with the textAlign, (if the text is set to the left, it means that the left end of the baseline is the point corresponding to the X and Y coordinates of the text, the center is the point corresponding to the X and Y coordinates of the text, and the right end of the text baseline is the point corresponding to the X and Y coordinates of the text).

ctx.fillText('Test code', 200, 200) // The fill attribute is determined by the fillStyle attribute

PS: so, what is a baseline? You can understand it by looking at the pictures. By the way, you can also review the basic knowledge of css text.

strokeText('text', x, y): draws a blank text.

ctx.strokeText('Test code', 200, 200) // Stroke attribute is determined by strokeStyle attribute

Font: setting font has two attributes: font size and font

ctx.font = "45px Consolas"

textAlign: text alignment. The attribute values include five attribute values: left right end start center (the effects of start and left, end and right are the same). canvas is left aligned by default.

ctx.textAlign = 'center'

Direction: the direction of the text has two attribute values, rtl and ltr, which can also be inherit, inherited by canvas or doument. This attribute represents the direction of the text, rtl represents the right to left of the text, and ltr represents the left to right (some browsers may not be compatible with this attribute).

measureText: you can get some parameters of the current text under the current style of the text and return an object TextMetrics.

let a = ctx.measureText('Required text')
console.log(a) // This gets the TextMetrics object

/* Get the TextMetrics object from */
TextMetrics = {
    width: 123.7060546875, // Considering the size of the current text and the width of the text after the font, this is the only commonly used width.
    actualBoundingBoxLeft: -2, // Given from canvasrenderingcontext2d The textalign property specifies the distance from the given alignment point to the left of the bounding rectangle of the given text. The distance is measured parallel to the baseline.
    actualBoundingBoxRight: 118.96484375, // Property to the right of the rectangle of the given text boundary. The distance is measured parallel to the baseline.
    actualBoundingBoxAscent: 31, // Represents from canvasrenderingcontext2d The distance from the horizontal line indicated by the textbaseline property to the top of the highest bounding rectangle of all fonts used to render text.
    actualBoundingBoxDescent: 10 , // Represents from canvasrenderingcontext2d The distance from the horizontal line indicated by the textbaseline property to the bottom of the bounding rectangle of all fonts used to render text.
}

Because this is used too little, please refer to: http://www.miaoxingyun.com/api/TextMetrics.html

shadowOffsetX: horizontal shadow deviation of text
shadowOffsetY: vertical shadow deviation of text
shadowColor: shadow color
shadowBlur: shadow blur

ctx.shadowOffsetX = 2 
ctx.shadowOffsetY = 2
ctx.shadowColor = '#dddddd'/ / black by default
ctx.shadowBlur = 4
// One of the four attributes is indispensable, especially the last two.

Source code

	window.onload = () => {
        let canvas = document.getElementById('demo')
        let ctx = canvas.getContext('2d')

        ctx.font = '45px Consolas'

        ctx.strokeText('Test text 1', 140, 50) // Hollow word
        ctx.fillText('Test text 2', 140, 90)  // Black character

		// This step draws guides
        ctx.save()
        ctx.beginPath()
        ctx.moveTo(140, 0) 
        ctx.lineTo(140, 600)
        ctx.stroke()
        ctx.restore()

        ctx.save()
        ctx.textAlign = 'center'
        ctx.strokeText('Test text 3', 140, 150)
        ctx.stroke()
        ctx.restore()

        ctx.save()
        ctx.textAlign = 'right'
        ctx.strokeText('Test text 4', 140, 190)
        ctx.stroke()
        ctx.restore()

        // About alignment start and left end have the same effect as right

        ctx.save()
        ctx.direction = 'rtl' // Direction of text
        ctx.strokeText('Test text 5', 140, 250)
        ctx.stroke()
        ctx.direction = 'ltr' // Direction of text
        ctx.strokeText('Test text 6', 140, 250)
        ctx.stroke()
        ctx.restore()

        ctx.save()
	    ctx.font = '10px Consolas'
	    ctx.strokeText('Test text 7', 140, 290)
        let size = ctx.measureText('appppp') // Return object, TextMetrics 
        console.log(size.width) // This attribute is the only useful attribute at present
        ctx.restore()

		ctx.save()
		// ctx.font = '10px Consolas'
		// Text shadow
		ctx.shadowOffsetX = 3
		ctx.shadowOffsetY = 3
		ctx.shadowColor = '#999'
		ctx.shadowBlur = 5
		ctx.strokeText('Test text 8', 140, 350)
        ctx.restore()
    }

Tags: Javascript html5

Posted by Adam on Tue, 31 May 2022 10:36:16 +0530