Study your flashcards anywhere!

Download the official Cram app for free >

  • Shuffle
    Toggle On
    Toggle Off
  • Alphabetize
    Toggle On
    Toggle Off
  • Front First
    Toggle On
    Toggle Off
  • Both Sides
    Toggle On
    Toggle Off
  • Read
    Toggle On
    Toggle Off
Reading...
Front

How to study your flashcards.

Right/Left arrow keys: Navigate between flashcards.right arrow keyleft arrow key

Up/Down arrow keys: Flip the card between the front and back.down keyup key

H key: Show hint (3rd side).h key

A key: Read text to speech.a key

image

Play button

image

Play button

image

Progress

1/40

Click to flip

40 Cards in this Set

  • Front
  • Back
how to draw a line
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
open the path
ctx.beginPath()
move cursor to a point
ctx.moveTo(x, y)
move cursor to a point, making a line from the current point
ctx.lineTo(x, y)
draw stroke through current path
ctx.stroke()
close the path, adding a line from cursor to beginning point
ctx.closePath()
get/set stroke width
ctx.lineWidth:float
get/set stroke color
ctx.strokeStyle

(string) possible vals: "#ff2500", "#abc", "rgb(255, 0, 0)", "rgba(255, 0, 0, 0.5)", "blue"

default = "black"
get/set stroke cap
ctx.lineCap

(string) possible vals: "butt" | "round" | "square"

default = "butt"
ctx.lineCap

(string) possible vals: "butt" | "round" | "square"

default = "butt"
add an arc to current path (ignore where cursor is right now. it moves to end of arc - that is, point of endAngle)
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise=false)

angles in radians; (x, y) are center of circle
add an arc to current path, beginning where cursor is right now
ctx.arcTo(controlX, controlY, endX, endY, radius)

creates a line from current point to actual beginning of arc; cursor is left at end of arc, which might not be the given end point (depending on the radius).
ctx.arcTo(controlX, controlY, endX, endY, radius)

creates a line from current point to actual beginning of arc; cursor is left at end of arc, which might not be the given end point (depending on the radius).
clear a rect in the canvas
ctx.clearRect(x, y, w, h)
how to draw two (adjacent) sides of a rectangle joined with a round corner
var left = rect.x, top = rect.y, right = left + rect.w, bottom = top + rect.h;
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right - rad, top);
ctx.arcTo(right, top, right, top + rad, rad);
ctx.lineTo(right, bottom);
ctx.stroke();
how to add a quadratic curve to the current path
ctx.quadraticCurveTo(controlX, controlY, endX, endY)

path starts at current point, ends at end point; control point determines where the curve is 'pulled' from.
ctx.quadraticCurveTo(controlX, controlY, endX, endY)

path starts at current point, ends at end point; control point determines where the curve is 'pulled' from.
how to add a bezier curve to the current path
ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);
get/set stroke line join type (like line cap)
ctx.lineJoin

(string) possible vals: "miter" | "round" | "bevel"

default = "miter"
ctx.lineJoin

(string) possible vals: "miter" | "round" | "bevel"

default = "miter"
how to add a rectangle to the current path
ctx.rect(x, y, w, h)

resulting rectangle is closed; cursor ends up at origin (x, y)
get/set fill color
ctx.fillStyle

(string) possible vals: "#ff2500", "#abc", "rgb(255, 0, 0)", "rgba(255, 0, 0, 0.5)", "blue"

default = "black"
fill current path (closed automatically)
ctx.fill()
how to draw a linear/radial gradient
1. create a fillable path (eg a rectangle)
2. create a linear/radial gradient object
3. add color stops to the obj
4. set context's fill style to the obj
5. call fill
how to create a linear gradient object
var myGradient = ctx.createLinearGradient(x1, y1, x2, y2)
how to create a radial gradient object
var myGradient = ctx.createRadialGradient(x1, y1, rad1, x2, y2, rad2)

instead of a line along which color gradually shifts, there are two circles. if they're not concentric, a "cone" will be drawn from smaller to larger.
how to add color stops to a linear/radial gradient object
myGradient.addColorStop(position, color)

position is a float (1 is the end of the line, 0 the beginning, 0.5 the middle).
color is a string (eg "red", "rgba(...)", "#f1c", etc).
once linear/radial gradient obj is configured, how can I use it?
ctx.fillStyle = myGradient;
ctx.fill();
get/set text color
actually, use ctx.fillStyle
get/set font
ctx.font

string like "italic 40pt Calibri"
* first part (can be ommited) should be normal/italic/bold
* second part, a value in pt or px
* third part can be Trebuchet ms, Arial, Helvetica, etc...
draw text
ctx.fillText(string, x, y) OR ctx.strokeText(string, x, y)

the point is the left bottom corner of the rectangle the text will occupy, the bottom being actually the text baseline!
get/set text align
ctx.textAlign

can be "left" (default), "center", "right", and "start" or "end" for text orientation
how does translation work?
ctx.translate(x, y)

what this does is, after translating (10, 10), every absolute (x, y) vals you give will have that (10, 10) added. so if you do

ctx.translate(10, 10);
ctx.rect(0, 0, 30, 30);

it will be taken exactly as if you did

ctx.rect(10, 10, 30, 30);

this is cumulative: if you call it first with (8, 8) and then with (12, 12), there will be a total translation of (20, 20).
also, you can translate between adding two segments to a path.

ALSO: ctx.translate() is affected by the current state of the matrix; if you pass in (10, 10) and there is a horizontal scaling of 1.5, it will end up as (15, 10).
how does scaling work?
ctx.scale(xFactor, yFactor)

cumulative. affects positions and sizes. every x, y, w & h you give to the path building (or directly drawing) functions, are multiplied by the current scale factors.
how does rotation work?
ctx.rotate(angle)

angle is in radians. the rotation pivot is always canvas (0, 0), so you must translate the context such that the center of what you want to draw rotated is exactly at (0, 0). So, if say you have a point (x, y) you want to use as origin for text drawing, but want the text to be rotated (start at that point but go up or down, not just right), do

ctx.translate(x, y);
ctx.rotate(a);
ctx.fillText("something", 0, 0);

remember, first translate, then rotate.
how to reset the current transform back to identity
ctx.setTransform(1, 0, 0, 1, 0, 0)

just think "setTransform 100 100"
setTransform() is a diff method from transform()!!!!
how does the transformation matrix work?
ctx.setTransform(a, b, c, d, e, f)

any coordinate about to be drawn is transformed such:
x = a*x + c*y + e;
y = b*x + d*y + f;
if you do transform instead of setTransform, the transformation is applied to the current one.
how does the context stack work?
however you configure the context (tranforms, colors, etc), if you do ctx.save() and then modify it, when you do ctx.restore() it goes back exactly to its previous state. you can save and restore as many times as you want... its a stack, duh
how does ctx.translate(x, y) affect the matrix?
X is added to E (aka TX) and Y is added to F (aka TY)
how does ctx.scale(sx, sy) affect the matrix?
current A is multiplied by SX, current D is multiplied by SY
how to skew... yeah, how?
ctx.transform(1, sy, sx, 1, 0, 0)

the two 1's multiply the scale, the two 0's add to the translation.
SX is added to B and SY is added to C.

note that the SY arg comes before SX; if SX = 0 and SY = 1, all X vals will remain the same but every Y val will be added 1 for each X. That is to say, with SY = 1 and SX = 0, a square would occupy the same horizontal space but it would slope downwards (at 45 degrees) and occupy twice the vertical space.
how does ctx.rotate(a) affect the matrix?
it is equivalent to:
ctx.transform(Math.cos(a) , -Math.sin(a), Math.sin(a), Math.cos(a), 0, 0)

the rotation center is (tx, ty), the transation values
how to make isometric perspective
ctx.transform(1, 0.5, -1, 0.5, tx, ty)

(tx, ty) is the translation and can be anything
how do clipping areas work?
1. create a path
2. ctx.clip()
3. everything you draw will be clipped
4. ctx.restore() removes the clip