Scribd
Upload
28 views15 pages

CGPL Lecture3

This document provides an introduction to HTML5 Canvas programming and JavaScript. It discusses simple canvas transformations like rotation and scale. It explains how to draw content on the canvas, including boxes, text, and applying transformations. JavaScript is introduced as the scripting language used to create interactive canvas applications in web browsers. Key canvas drawing functions like fillStyle, fillRect, and context transformations like rotate are demonstrated.

Uploaded by

Ralph Cadalzo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views15 pages

CGPL Lecture3

This document provides an introduction to HTML5 Canvas programming and JavaScript. It discusses simple canvas transformations like rotation and scale. It explains how to draw content on the canvas, including boxes, text, and applying transformations. JavaScript is introduced as the scripting language used to create interactive canvas applications in web browsers. Key canvas drawing functions like fillStyle, fillRect, and context transformations like rotate are demonstrated.

Uploaded by

Ralph Cadalzo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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 prop‐ erties 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:
SIMPLE CANVAS TRANSFORMATION
● 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:
SIMPLE CANVAS TRANSFORMATION
● 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.
SIMPLE CANVAS TRANSFORMATION
● 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.
SIMPLE CANVAS TRANSFORMATION
● Another scenario of closer inspection: draw a black box first, then
set the rotation transform, and finally, draw the red box again.
SIMPLE CANVAS TRANSFORMATION
● 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.
SIMPLE CANVAS TRANSFORMATION
● 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.
SIMPLE CANVAS TRANSFORMATION
● 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:
02
JAVASCRIPT
JavaScript is a scripting or programming
language that allows you to implement
complex features on web pages.
JAVASCRIPT
● JavaScript will be used to create Canvas applications for the
reason it can be run inside nearly any web browser.

● Where will JavaScript be inserted?

● It’s a good idea to place your JavaScript in the <head> of your


HTML page because it makes it easy to find.
● You also have the choice to place it before the </body> at the
end of an HTML document to make sure that the whole page
loads before the JavaScript runs.
● Lastly, JavaScript can also be added via the use of an external file.
03
Drawing Content
DRAWING CONTENT
● First clear the drawing area. The following two lines of code draw
a yellow box on the screen that is the same size as the canvas.
fillStyle() sets the color, and fillRect() creates a rectangle and puts
it on the screen:
DRAWING CONTENT
● Next is adding text as the content of the Rectangle background.
● Set the color of the text in the same way the color of the
rectangle was set

● Set the font size and weight

● Set the vertical alignment of the text

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy