HTML Canvas Transformation Lecture Review

A set of practice flashcards covering HTML Canvas transformation methods including save, restore, translate, rotate, and scale based on lecture notes.

Which two indispensable methods help in creating complex drawings in HTML Canvas?

save() and restore()

What is the purpose of the ctx.save() method?

It saves the entire current state of the Canvas element by pushing it onto a stack.

What does the ctx.restore() method do?

It rollbacks the last saved canvas state by popping it off the stack.

How many times can the save() method be called?

It can be called as many times as the user needs, with each state being pushed into the stack.

In what three scenarios is using save() recommended?

When temporarily changing styles, applying transformations (rotate, scale, translate), or wishing to avoid manually resetting properties.

What does the translate(x, y) method accomplish?

It moves the canvas origin and the grid to another position, where $x$ is the horizontal distance and $y$ is the vertical distance.

In what unit must the angle be passed to the rotate(angle) method?

Radians

What is the formula to convert degrees to radians in the context of Canvas?

$$\text{radians} = \text{degrees} \times \frac{\text{Math.PI}}{180}$$

Where does rotation occur by default in the Canvas coordinate system?

Rotation happens around the origin $(0,0)$.

What is the recommended sequence of commands to rotate an object properly around a specific pivot point?

$1.$ ctx.save(); $2.$ ctx.translate(centerX, centerY); $3.$ ctx.rotate(angle); $4.$ ctx.fillRect(-width/2, -height/2, width, height); $5.$ ctx.restore();

What is the purpose of the scale(x, y) method?

It is used to increase or decrease the size of the Canvas grid by modifying the unit size.

By default, how much is one unit of the canvas element valued at?

Exactly $1\,\text{pixel}$.

In the scale(x, y) method, what is the difference between values less than 1.0 and more than 1.0?

Values less than $1.0$ reduce the unit size, while values more than $1.0$ increase the unit size.