Canvas Reference Flashcards

1
Q

fillStyle

A

Sets or returns the color, gradient, or pattern used to fill the drawing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

strokeStyle

A

Sets or returns the color, gradient, or pattern used for strokes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

shadowColor

A

Sets or returns the color to use for shadows

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

shadowBlur

A

Sets or returns the blur level for shadows

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

shadowOffsetX

A

Sets or returns the horizontal distance of the shadow from the shape

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

shadowOffsetY

A

Sets or returns the vertical distance of the shadow from the shape

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

createLinearGradient()

A

Creates a linear gradient (to use on canvas content)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

createPattern()

A

Repeats a specified element in the specified direction

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

createRadialGradient()

A

Creates a radial/circular gradient (to use on canvas content)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

addColorStop()

A

Specifies the colors and stop positions in a gradient object

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

lineCap

A

Sets or returns the style of the end caps for a line

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

lineJoin

A

Sets or returns the type of corner created, when two lines meet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

lineWidth

A

Sets or returns the current line width

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

miterLimit

A

Sets or returns the maximum miter length

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

rect()

A

Creates a rectangle

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

fillRect()

A

Draws a “filled” rectangle

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

strokeRect()

A

Draws a rectangle (no fill)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

clearRect()

A

Clears the specified pixels within a given rectangle

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

fill()

A

Fills the current drawing (path)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

stroke()

A

Actually draws the path you have defined

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

beginPath()

A

Begins a path, or resets the current path

22
Q

mclip()

A

Moves the path to the specified point in the canvas, without creating a line

23
Q

closePath()

A

Creates a path from the current point back to the starting point

24
Q

lineTo()

A

Adds a new point and creates a line from that point to the last specified point in the canvas

25
Q

clip()

A

Clips a region of any shape and size from the original canvas

26
Q

quadraticCurveTo()

A

Creates a quadratic Bézier curve

27
Q

bezierCurveTo()

A

Creates a cubic Bézier curve

28
Q

arc()

A

Creates an arc/curve (used to create circles, or parts of circles)

29
Q

arcTo()

A

Creates an arc/curve between two tangents

30
Q

isPointInPath()

A

Returns true if the specified point is in the current path, otherwise false

31
Q

scale()

A

Scales the current drawing bigger or smaller

32
Q

rotate()

A

Rotates the current drawing

33
Q

translate()

A

Remaps the (0,0) position on the canvas

34
Q

transform()

A

Replaces the current transformation matrix for the drawing

35
Q

setTransform()

A

Resets the current transform to the identity matrix. Then runs transform()

36
Q

font

A

Sets or returns the current font properties for text content

37
Q

textAlign

A

Sets or returns the current alignment for text content

38
Q

textBaseline

A

Sets or returns the current text baseline used when drawing text

39
Q

fillText()

A

Draws “filled” text on the canvas

40
Q

strokeText()

A

Draws text on the canvas (no fill)

41
Q

measureText()

A

Returns an object that contains the width of the specified text

42
Q

drawImage()

A

Draws an image, canvas, or video onto the canvas

43
Q

width

A

Returns the width of an ImageData object

44
Q

height

A

Returns the height of an ImageData object

45
Q

data

A

Returns an object that contains image data of a specified ImageData object

46
Q

createImageData()

A

Creates a new, blank ImageData object

47
Q

getImageData()

A

Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas

48
Q

putImageData()

A

Puts the image data (from a specified ImageData object) back onto the canvas

49
Q

globalAlpha

A

Sets or returns the current alpha or transparency value of the drawing

50
Q

globalCompositeOperation

A

Sets or returns how a new image are drawn onto an existing image

51
Q

save()

A

Saves the state of the current context

52
Q

restore()

A

Returns previously saved path state and attributes