Another Canvas Guide [3]: Drawing Images and Text, Saving Images and States

Introduction

In this part we will look at a long-battered topic - drawing images, and not yet such a beaten one - drawing text. Consider all the settings for the text and as an example using the studied consider the writing of a graphing tool.

Drawing images

Image object

To draw an image you need to create its object. The constructor is the Image function. It takes no arguments, and to set the path to the image you need to change the src property of the resulting object. Let's add a line to our script:

var img = new Image() img.src = 'path.png' 

Upload an image

Now it is worth noting that before drawing an image, it is worth loading. To do this, add a load event handler for the img object, add it after creating the object, and you’ll end up with this code:

 var img = new Image() img.onload = function(){ //       } img.src = 'path.png' 

')

Draw an image

 drawImage(object img, float x, float y) 

- draws an image with the original size so that its upper left corner is at the point (x; y).

Scalable

 drawImage(object img, float x, float y, float w, float h) 

- also works but instead of the original size it draws with the width w and the height h.

We cut

 drawImage(object img, float sx, float sy, float sw, float sh, float cx, float cy, float cw, float ch) 

- draws a part of the image with the width sw and height sh located at the point (sx, sy) in the source image on the canvas with the width cw and height ch at the point (cx, cy)

Drawing text

Very often in games, and indeed in applications, you need to show the user not only a picture, but also some information; for this you can use the text-drawing functions.

Draw flooded

 ctx.fillText(string text, float x, float y) 

- draws the text at the point (x; y).

Note: The fillText function has an optional maxWidth argument, but it works lousy in FF and does not work at all in Chrome.

Change the font

The font context property controls the text style and has a syntax similar to css , for example, add the following lines to our script:

 ctx.font = "bold italic 30px sans-serif" ctx.fillText(" ",300,300) 

We can control the color and not only through the fillStyle and strokeStyle properties

Draw contours

The attentive reader most likely logically guessed that the strokeText function is used to draw the outlines of the text; in our example, we replace fillText with strokeText.

Horizontal alignment

For text alignment, there is a textAlign property; it can take five possible values:

• left - the text is aligned to the left
• right - the text is aligned to the right
• center - the text is centered
• start - (default value) the text is aligned from the beginning of the line to the left for the letter from left to right and aligned to the right for the letter from right to left
• end - the text is aligned from the beginning of the line to the right for a letter from left to right and aligned to the left for a letter from right to left

Base line of text

The textBaseline property exists to control the baseline of the text; it can take the following values: top, hanging, middle, alphabetic, ideographic, bottom. The meaning of these values ​​is easier to show than to describe, so the picture was found on WhatWG:

Measure width

 measureText(string text) 

- returns a special TextMetrics object that currently has only one property - width - the width of the text in pixels.

Saving images on the client side

There are already three methods for saving images (getAsFile, getBlob, toDataURL), but we will consider only toDataURL since it is the one that is most well supported by browsers. It is worth noting that the method is applied not to the context, but to the canvas element, however it can be obtained as the context 'canvas' property; this method also takes as an argument the type of the image (default is 'png'). This method will return a base64 image.

Save can not be restored

If some context property is changed, it will affect all subsequent ones, to simplify the life of developers, there are two context methods, save and restore, in the specification.

save - saves the current state

restore - restores the last saved

Consider a simple example:

 ctx.save() ctx.textAlign = 'center' ctx.font = "bold italic 30px sans-serif" ctx.strokeText(" ",300,300) ctx.restore() ctx.fillText(" ",400,400) 

As you can see, instead of resetting all the properties to the initial ones, we simply used save and restore