Html5 Canvas Drawing

Front 1

how to draw a line

Back 1

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();

Front 2

open the path

Back 2

ctx.beginPath()

Front 3

move cursor to a point

Back 3

ctx.moveTo(x, y)

Front 4

move cursor to a point, making a line from the current point

Back 4

ctx.lineTo(x, y)

Front 5

draw stroke through current path

Back 5

ctx.stroke()

Front 6

close the path, adding a line from cursor to beginning point

Back 6

ctx.closePath()

Front 7

get/set stroke width

Back 7

ctx.lineWidth:float

Front 8

get/set stroke color

Back 8

ctx.strokeStyle

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

default = "black"

Front 9

get/set stroke cap

Back 9

ctx.lineCap

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

default = "butt"

Front 10

add an arc to current path (ignore where cursor is right now. it moves to end of arc - that is, point of endAngle)

Back 10

ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise=false)

angles in radians; (x, y) are center of circle

Front 11

add an arc to current path, beginning where cursor is right now

Back 11

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).

Front 12

clear a rect in the canvas

Back 12

ctx.clearRect(x, y, w, h)

Front 13

how to draw two (adjacent) sides of a rectangle joined with a round corner

Back 13

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();

Front 14

how to add a quadratic curve to the current path

Back 14

ctx.quadraticCurveTo(controlX, controlY, endX, endY)

path starts at current point, ends at end point; control point determines where the curve is 'pulled' from.

Front 15

how to add a bezier curve to the current path

Back 15

ctx.bezierCurveTo(control1X, control1Y, control2X, control2Y, endX, endY);

Front 16

get/set stroke line join type (like line cap)

Back 16

ctx.lineJoin

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

default = "miter"

Front 17

how to add a rectangle to the current path

Back 17

ctx.rect(x, y, w, h)

resulting rectangle is closed; cursor ends up at origin (x, y)

Front 18

get/set fill color

Back 18

ctx.fillStyle

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

default = "black"

Front 19

fill current path (closed automatically)

Back 19

ctx.fill()

Front 20

how to draw a linear/radial gradient

Back 20

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

Front 21

how to create a linear gradient object

Back 21

var myGradient = ctx.createLinearGradient(x1, y1, x2, y2)

Front 22

how to create a radial gradient object

Back 22

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.

Front 23

how to add color stops to a linear/radial gradient object

Back 23

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).

Front 24

once linear/radial gradient obj is configured, how can I use it?

Back 24

ctx.fillStyle = myGradient;
ctx.fill();

Front 25

get/set text color

Back 25

actually, use ctx.fillStyle

Front 26

get/set font

Back 26

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...

Front 27

draw text

Back 27

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!

Front 28

get/set text align

Back 28

ctx.textAlign

can be "left" (default), "center", "right", and "start" or "end" for text orientation

Front 29

how does translation work?

Back 29

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).

Front 30

how does scaling work?

Back 30

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.

Front 31

how does rotation work?

Back 31

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.

Front 32

how to reset the current transform back to identity

Back 32

ctx.setTransform(1, 0, 0, 1, 0, 0)

just think "setTransform 100 100"
setTransform() is a diff method from transform()!!!!

Front 33

how does the transformation matrix work?

Back 33

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.

Front 34

how does the context stack work?

Back 34

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

Front 35

how does ctx.translate(x, y) affect the matrix?

Back 35

X is added to E (aka TX) and Y is added to F (aka TY)

Front 36

how does ctx.scale(sx, sy) affect the matrix?

Back 36

current A is multiplied by SX, current D is multiplied by SY

Front 37

how to skew... yeah, how?

Back 37

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.

Front 38

how does ctx.rotate(a) affect the matrix?

Back 38

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

Front 39

how to make isometric perspective

Back 39

ctx.transform(1, 0.5, -1, 0.5, tx, ty)

(tx, ty) is the translation and can be anything

Front 40

how do clipping areas work?

Back 40

1. create a path
2. ctx.clip()
3. everything you draw will be clipped
4. ctx.restore() removes the clip