Module 3

COMPUTER
GRAPHICS
PROGRAMMING
Introduction to HTML5 Canvas
 01
SIMPLE CANVAS
TRANSFORMATION
 SIMPLE CANVAS TRANSFORMATION
● Transformations on the canvas refer to the mathematical
adjustment of physical properties of drawn shapes. The two most
commonly used shape transformations are scale and rotate.
● An object on the canvas is said to be at the 0 angle rotation when
it is facing to the left.
● Consequently, if we draw an equilateral box (all four sides are the
same length), it doesn’t have an initial facing side other than one
of the flat sides facing to the left. Let’s draw that box for
reference:
 ROTATION AND TRANSLATION
● Now, if we want to rotate the entire canvas 45
degrees, we need to do a couple simple steps. First,
we always set the current Canvas transformation to
the “identity” (or “reset”) matrix:

● Because Canvas uses radians, not degrees, to specify

its transformations, we need to convert our 45-
degree angle into radians:
 ROTATION AND TRANSLATION
● Transformations are applied to shapes and paths drawn after
the setTransform() or other transformation function is called.
● If you use this code verbatim, you will see a funny
result...nothing! This is because the setTransform() function call
affects only shapes drawn to the canvas after it is applied.
ROTATION AND TRANSLATION
 ROTATION AND TRANSLATION
● The red box is rotated, but it looks like the canvas was rotated
with it. The entire canvas did not rotate, only the portion is drawn
after the context.rotate() function was called.
● So, why did our square both rotate and move off to the left of the
screen? The origin of the rotation was set at the “nontranslated”
0,0 position, resulting in the square rotating from the top left of
the entire canvas.
 ROTATION AND TRANSLATION
● Another scenario of closer inspection: draw a black box first, then
set the rotation transform, and finally, draw the red box again.
 ROTATION AND TRANSLATION
● The small black square was unaffected by the rotation, so you can
see that only the shapes drawn after the context.rotate() function
was called were affected.
 ROTATION AND TRANSLATION
● We must “translate” the point of origin to the center of our
shape to rotate it around its own center.
● Change the rotation of the red square 45 degrees while keeping it
in its current location.
● First, we take the numbers we applied to the fillRect() function
call to create a few variables to hold the red square’s attributes.
 ROTATION AND TRANSLATION
● Next, using the context.translate() function call, we must change
the origin of the canvas to be the center of the red square we
want to rotate and draw. This function moves the origin of the
canvas to the accepted x and y locations.
● The center of our red square will now be the desired top-left
corner x location for our object (100), plus half the width of our
object. Using the variables we created to hold attributes of the
red square, this would look like:
 ROTATION AND TRANSLATION
● Next, we must find the y location for the origin translation. This
time, we use the y value of the top-left corner of our shape and
the height of the shape:

● The translate() function call looks like this:

● Now that we have translated the canvas to the correct point, we

can do our rotation. The code has not changed:
 ROTATION AND TRANSLATION
● Finally, we need to draw our shape. We cannot simply reuse the
same values from the previous example because the canvas
origin point has moved to the center of the location where we
want to draw our object.
 ROTATION AND TRANSLATION
● Finally, we need to draw our shape. We cannot simply reuse the
same values from the previous example because the canvas
origin point has moved to the center of the location where we
want to draw our object.
● We will need to draw the object starting with the correct upper-
left coordinates for x and y. We do this by subtracting half the
width of our object from the origin x, and half the height of our
object from the origin y:
 ROTATION AND TRANSLATION
● Results
 ROTATION AND TRANSLATION
● Multiple rotated squares
 02
SCALE
TRANSFORMATIONS
 SCALE TRANSFORMATIONS

● The context.scale() function takes in two parameters: the first is

the scale attribute for the x-axis, and the second is the scale
attribute for the y-axis. The value 1 is the normal scale for an
object.
● Therefore, if we want to double an object’s size, we can set both
values to 2. Using the following code in drawScreen() produces
the red square.
 SCALE TRANSFORMATIONS

● The result shows that scale works in a similar manner as rotation.

The previous code did not translate the scale point's origin to
double the square's size; rather, used the top-left corner of the
canvas as the origin point.
● The result is that the red square appears to move farther down
and to the left.
 SCALE TRANSFORMATIONS

● What we would like is for the red square to remain in place and
to scale from its center. We do this by translating to the center of
the square before we scale, and by drawing the square around
this center point.
 COMBINING SCALE AND ROTATION
TRANSFORMATIONS
● Canvas transformations like scale and rotation can be applied to
an object. The below code display how to combine scale(2,2) and
rotate(angleInRadians) from the previous examples:
 03
FILLING OBJECTS WITH
COLORS AND GRADIENTS
 SETTING BASIC FILL COLORS
● The Canvas fillStyle property is used to set a basic color for filling
shapes on the canvas. Previous examples used simple color
names for fillStyle. An example is

● The following are examples of color string values:

➢ Black = #000000
➢ Green = #008000
➢ Silver = #C0C0C0
➢ Lime = #00FF00
➢ Gray = #808080
➢ Olive = #808000
➢ White = #FFFFFF
 SETTING BASIC FILL COLORS
● Using a string for the color name is not the only available method
of specifying a solid color fill. The following list includes a few
other methods:
➢ Setting the fill color with the rgb() method - The rgb()
method lets us use the 24-bit RGB value when specifying our
fill colors:

➢ Setting the fill color with a hex number string - We can also
set the fillStyle color with a hex number in a string:
 SETTING BASIC FILL COLORS
➢ Setting the fill color with the rgba() method - The rgba()
method allows us to specify a 32-bit color value with the
final 8 bits representing the alpha value of the fill color:
 FILLING SHAPES WITH GRADIENTS
● There are two basic options for creating gradient fills on the
canvas: linear and radial.
● A linear gradient creates a horizontal, vertical, or diagonal fill
pattern; the radial variety creates a fill that “radiates” from a
central point in a circular fashion.
 LINEAR GRADIENTS
● Linear gradients come in three basic styles: horizontal, vertical,
and diagonal. We control where colors change in our gradient by
setting color stops at points along the length of the object we
want to fill.
● Below is an example of a horizontal gradient:
 LINEAR GRADIENTS
● To create the horizontal gradient, we must first create a
variable (gr) to reference the new gradient. Here’s how
we set it:

● The four parameter values in the createLinearGradient

method call are the top-left x and y coordinates to start
the gradient, as well as the two bottom-right points to
end the gradient. Our example starts at 0,0 and goes to
100,0. Notice that the y values are both 0 when we
create a horizontal gradient; the opposite will be true
when we create a vertical gradient.
 LINEAR GRADIENTS
● After defining the size of our gradient, add color stops that take
two parameter values. The first is a relative position origin point
along the gradient to start with color, and the second is the color
to use. The relative position must be a value from 0.0 to 1.0:

● The first color was red set at 0, a green color at .5 (the center),
and another red color at 1. This will fill our shape with a relatively
even red to green to red gradient.
 APPLYING A HORIZONTAL GRADIENT TO A COMPLEX SHAPE

● Linear gradients can also be applied to a closed shape made up of

points. A shape is considered closed when the final point is the
same as the starting point.
 APPLYING A HORIZONTAL GRADIENT TO A COMPLEX SHAPE

● Vertical gradients are created in a very similar manner as the

horizontal variety. The difference is that we must specify a y
value that is not 0, and the x values must both be 0.
 APPLYING A HORIZONTAL GRADIENT TO A COMPLEX SHAPE

● The only difference between the previous 2 examples is the line

creating the linear gradient.
➢ The horizontal version

➢ The new vertical version

 APPLYING A HORIZONTAL GRADIENT TO A COMPLEX SHAPE

● All of the same rules for strokes on horizontal gradients apply to

vertical ones. The example below shows stroking with gradient
instead of filling it.