Module 2

COMPUTER
GRAPHICS
PROGRAMMING
Drawing in Canvas
 01
The Basic Rectangle
Shape
 The Basic Rectangle Shape
● On Canvas, basic rectangle shapes can be drawn in three
different ways: filling, stroking or clearing.
● Rectangles can also be built using paths.
● Rectangle Canvas functions:
➢ fillRect(x,y,width,height) - Draws a filled rectangle at
position x,y for width and height.
➢ strokeRect(x,y,width,height) - Draws a rectangular outline
at position x,y for width and height. This makes use of the
current strokeStyle, lineWidth, lineJoin, and miterLimit
settings.
 The Basic Rectangle Shape
➢ clearRect(x,y,width,height) - Clears the specified area and
makes it fully transparent (using transparent black as the
color) starting at position x,y for width and height.

● Before these functions can be used, the fill or stroke style must
be set up first.
● The most basic way to set these styles is to use a color value
represented by a 24-bit hex string. Here is an example from our
first demonstration:
 The Basic Rectangle Shape
● The fill style is simply set to be the RGB color black, while the
stroke style is a classic purple color
 02
The Canvas State
 The Canvas State

● When drawing 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 Canvas State

➢ 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
 The Canvas State

● What’s not part of the State?

➢ The current path and current bitmap being manipulated on
the Canvas context are not part of the saved state. This very
important feature will allow us to draw and animate
individual objects on the canvas.

● How Do We Save and Restore the Canvas State?

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

➢ To restore the canvas by “popping” the last state saved to

the stack, use:
 03
Using Paths to Create
Lines
 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.
 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.
● The most basic path is controlled by a series of
moveTo() and lineTo() commands.
● The context.stroke(); command will finalize and
draw the line we have constructed
 Starting and Ending a Path

● 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.
 Starting and Ending a Path

● 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.
 Starting and Ending a Path

● 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.
Examples of More Advanced Line Drawing
 04
Advanced Path Methods
 Arc
● There are four functions we can use to draw arcs and curves onto
the canvas. An arc can be a complete circle or any part of a circle.
● context.arc()

➢ The x and y values define the center of our circle, and the
radius will be the radius of the circle upon which our arc will
be drawn. startAngle and endAngle are in radians, not
degrees. anticlockwise is a true or false value that defines
the direction of the arc.
 Arc
● For example, if we want to draw a circle with a center point at
position 100,100 and with a radius of 20, we could use the
following code for the contents of drawScreen():
 Arc
● Notice that we have to convert our start angle (0) and our end
angle (360) into radians by multiplying them by (Math.PI/180). By
using 0 as the start angle and 360 as the end, we create a full
circle.
● We can also draw a segment of a circle by not specifying the
entire 0 to 360 start and stop angles. This code for drawScreen()
will create one-quarter of a circle drawn clock‐ wise.
 Arc
● If we want to draw everything but the 0–90 angle, as shown in
Figure 2-6, we can employ the anticlockwise argument and set it
to true:
 Arc
● context.arcTo()

➢ The arcTo method has been implemented only in the latest

browsers—perhaps because its capabilities can be replicated
by the arc() function. It takes in a point (x1,y1) and draws a
straight line from the current path position to this new
position. Then it draws an arc from that point to the y1,y2
point, using the given radius.
 Arc
● The context.arcTo method will work only if the current path has
at least one subpath. So, let’s start with a line from position 0,0 to
position 100,200. Then we will build our small arc. It will look a
little like a bent wire coat hanger.
 Bezier Curves
● Bezier curves, which are far more flexible than arcs, come in both
cubic and quadratic types:

● The Bezier curve is defined in 2D space by a “start point,” an “end

point,” and one or two “control” points, which determine how
the curve will be constructed on the canvas. A normal cubic
Bezier curve uses two points, while a quadratic version uses a
single point.
 Bezier Curves
● The quadratic Bezier curve is the simplest form of Bezier curve
which only requires the end-point (last) and a single point in
space to use as a control point.
 Bezier Curves
● The cubic Bezier curve offers more options because we have two
control points to work with. The result is that curves—such as the
classic “S” curve are easier to make:
 05
The Canvas Clipping
Region
 The Canvas Clipping Region

● By using the Canvas clipping region, we can limit the drawing

area for a path and its subpaths. We do this by first setting rect()
attribute of the context to a rectangle that encompasses the
region we would like to draw in and then calling the clip()
function.
● This will set the clip region to be the rectangle we defined with
the rect() method call. Now, no matter what we draw onto the
current context, it will display only the portion that is in this
region.
 The Canvas Clipping Region

● First draws a large 200×200 black rectangle onto

the canvas. Next, we set our Canvas clipping
region to rect(0,0,50,50). The clip() call then clips
the canvas to those specifications. When we
draw our full red circle arc, we see only the
portion inside this rectangle. Finally, we set the
clipping region back to rect(0,0,500,500) and
draw a new blue circle.
The Canvas Clipping Region