Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Advanced HTML5 – Part 2

Wednesday, February 26th, 2014 by Servage

When we draw on the Canvas context, we can make use of a stack of so-called drawing states. Each of these states stores data about the Canvas context at any one time. Here is a list of the data stored in the stack for each state:

• Transformation matrix information such as rotations or translations using the context.rotate() and context.setTransform() methods

• The current clipping region

• The current values for canvas attributes, such as (but not limited to):

—globalAlpha

—globalCompositeOperation

—strokeStyle

—textAlign, textBaseline

—lineCap, lineJoin, lineWidth, and miterLimit

—fillStyle

—font

—shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY

How Do We Save and Restore the Canvas State?

To save (push) the current state to the stack, call:

context.save()

To restore the canvas by “popping” the last state saved to the stack, use:

context.restore()

Using Paths to Create Lines

Paths are a method we can use to draw any shape on the canvas. A path is simply a list of points, and lines to be drawn between those points. A Canvas context can have only a single “current” path, which is not stored as part of the current drawing state when the context.save() method is called.

Context for paths is a critical concept to understand, because it will enable you to transform

only the current path on the canvas.

Starting and Ending a Path

The beginPath() function call starts a path, and the closePath() function call ends the path. When you connect two points inside a path, it is referred to as a subpath. A subpath is considered “closed” if the final point connects to the first point.

asd

The current transformation matrix will affect everything drawn in this path. As we will see when we explore the upcoming section on transformations, we will always want to set the transformation matrix to the identity (or reset) if we do not want any transformation applied to a path.

The Actual Drawing

The most basic path is controlled by a series of moveTo() and lineTo() commands, as shown in Example:  A simple line path

function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath();
}

The below image shows an example of this output.

 lineCap attributes

context.lineCap. The lineCap is the end of a line drawn on the context. It can be one of three values:

butt

The default; a flat edge that is perpendicular to the edge of the line.

round

A semicircle that will have a diameter that is the length of the edge of the line.

square

A rectangle with the length of the line width and the height of half the line width, placed flat and perpendicular to the edge of the line.

lineJoin attributes

context.lineJoin. The lineJoin is the “corner” that is created when two lines meet. This is called a join. A filled triangle is created at the join, and we can set its basic properties with the lineJoin Canvas attribute:

miter

The default; an edge is drawn at the join. The miterLimit is the maximum allowed ratio of miter length to line width. (The default is 10.)

bevel

A diagonal edge is drawn at the join.

round

A round edge is drawn at the join.

lineWidth

The lineWidth (default = 1.0) depicts the thickness of the line.

strokeStyle

The strokeStyle defines the color or style that will be used for lines and around shapes (as we saw with the simple rectangles).

Sources for further reading

Advanced HTML5 - Part 2, 2.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.