2D Functions

function draw() {
  ctx.fillStyle = "#f6f3ec"
  ctx.fillRect(0, 0, width, height)
  ctx.lineWidth = 4
  ctx.strokeStyle = "#333"

  ctx.fillStyle = "tomato"
  ctx.fillRect(20, 20, 100, 70)               // fillRect
  ctx.strokeRect(140, 20, 100, 70)            // strokeRect

  ctx.beginPath()                             // roundRect, different corners
  ctx.roundRect(260, 20, 100, 70, [30, 4, 30, 4])
  ctx.fillStyle = "gold"
  ctx.fill()
  ctx.stroke()

  ctx.beginPath()                             // arc: three-quarters of a circle
  ctx.moveTo(70, 165)
  ctx.arc(70, 165, 50, 0, Math.PI * 1.5)
  ctx.closePath()
  ctx.fillStyle = "mediumseagreen"
  ctx.fill()

  ctx.beginPath()                             // ellipse, turned 20 degrees
  ctx.ellipse(190, 165, 60, 30, 20 * Math.PI / 180, 0, Math.PI * 2)
  ctx.fillStyle = "deepskyblue"
  ctx.fill()

  ctx.beginPath()                             // arcTo: a rounded corner
  ctx.moveTo(260, 120)
  ctx.arcTo(360, 120, 360, 220, 40)
  ctx.lineTo(360, 220)
  ctx.stroke()

  ctx.beginPath()                             // quadratic and bezier curves
  ctx.moveTo(20, 290)
  ctx.quadraticCurveTo(110, 220, 200, 290)
  ctx.bezierCurveTo(240, 220, 320, 360, 380, 270)
  ctx.strokeStyle = "orchid"
  ctx.stroke()
}

let t = 0

function update(dt) {
  t += dt
}

// one straight line, in the style set now
function line(x1, y1, x2, y2) {
  ctx.beginPath()
  ctx.moveTo(x1, y1)
  ctx.lineTo(x2, y2)
  ctx.stroke()
}

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  ctx.fillStyle = "#333"
  ctx.font = "14px sans-serif"

  // lineCap: the thin red lines show where each line really ends
  const caps = ["butt", "round", "square"]
  for (let i = 0; i < caps.length; i++) {
    const y = 30 + i * 40
    ctx.lineWidth = 18
    ctx.lineCap = caps[i]
    ctx.strokeStyle = "steelblue"
    line(40, y, 200, y)
    ctx.fillText(caps[i], 225, y + 5)
  }
  ctx.lineCap = "butt"
  ctx.lineWidth = 1
  ctx.strokeStyle = "red"
  line(40, 10, 40, 125)
  line(200, 10, 200, 125)

  // lineJoin
  const joins = ["miter", "round", "bevel"]
  for (let i = 0; i < joins.length; i++) {
    const x = 40 + i * 120
    ctx.lineWidth = 18
    ctx.lineJoin = joins[i]
    ctx.strokeStyle = "darkorange"
    ctx.beginPath()
    ctx.moveTo(x, 230)
    ctx.lineTo(x + 40, 160)
    ctx.lineTo(x + 80, 230)
    ctx.stroke()
    ctx.fillText(joins[i], x + 20, 260)
  }

  // dashes, and dashes that march
  ctx.lineWidth = 4
  ctx.strokeStyle = "#333"
  const dashes = [[12, 6], [2, 6], [16, 4, 2, 4]]
  for (let i = 0; i < dashes.length; i++) {
    ctx.setLineDash(dashes[i])
    ctx.lineDashOffset = i === 0 ? -t * 20 : 0
    line(40, 290 + i * 25, 340, 290 + i * 25)
  }
  ctx.setLineDash([])
}

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  ctx.font = "20px sans-serif"

  // textAlign: the red line is x
  ctx.strokeStyle = "red"
  ctx.beginPath()
  ctx.moveTo(200, 10)
  ctx.lineTo(200, 110)
  ctx.stroke()
  ctx.fillStyle = "#222"
  const aligns = ["left", "center", "right"]
  for (let i = 0; i < aligns.length; i++) {
    ctx.textAlign = aligns[i]
    ctx.fillText(`textAlign ${aligns[i]}`, 200, 35 + i * 30)
  }

  // textBaseline: the red line is y
  ctx.textAlign = "left"
  ctx.beginPath()
  ctx.moveTo(10, 170)
  ctx.lineTo(width - 10, 170)
  ctx.stroke()
  ctx.font = "16px sans-serif"
  const bases = ["top", "middle", "alphabetic", "bottom"]
  for (let i = 0; i < bases.length; i++) {
    ctx.textBaseline = bases[i]
    ctx.fillText(bases[i], 15 + i * 105, 170)
  }
  ctx.textBaseline = "alphabetic"

  // outline, spacing, squeezing
  ctx.font = "bold 40px serif"
  ctx.lineWidth = 1.5
  ctx.strokeStyle = "navy"
  ctx.strokeText("Outline", 15, 250)
  ctx.font = "18px monospace"
  ctx.letterSpacing = "6px"
  ctx.fillText("SPACED", 230, 250)
  ctx.letterSpacing = "0px"
  ctx.fillText("This sentence is squeezed into 200 points", 15, 290, 200)
}

// a 4 x 4 pixel picture: a PNG file written out as text, so it needs no file
const face = loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAFElEQVR42mP4f50BjsAYDKAc7DIAeNIWCUSCv7wAAAAASUVORK5CYII=")

function draw() {
  ctx.fillStyle = "#dde"
  ctx.fillRect(0, 0, width, height)
  ctx.drawImage(face, 20, 20)                           // its own size: tiny
  ctx.imageSmoothingEnabled = true
  ctx.drawImage(face, 50, 20, 120, 120)                 // stretched, smoothed
  ctx.imageSmoothingEnabled = false
  ctx.drawImage(face, 190, 20, 120, 120)                // stretched, crisp
  ctx.drawImage(face, 0, 0, 2, 2, 330, 20, 120, 120)    // just the top-left quarter
}

// an arrow drawn round (0, 0), pointing right
function arrow() {
  ctx.beginPath()
  ctx.moveTo(-30, -10)
  ctx.lineTo(10, -10)
  ctx.lineTo(10, -22)
  ctx.lineTo(35, 0)
  ctx.lineTo(10, 22)
  ctx.lineTo(10, 10)
  ctx.lineTo(-30, 10)
  ctx.closePath()
  ctx.fill()
}

const steps = [
  ["as drawn", () => {}],
  ["rotate", () => ctx.rotate(-45 * Math.PI / 180)],
  ["scale", () => ctx.scale(1.5, 0.6)],
  ["mirror", () => ctx.scale(-1, 1)],
  ["slant", () => ctx.transform(1, 0, 0.8, 1, 0, 0)],
]

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  ctx.font = "14px sans-serif"
  ctx.textAlign = "center"
  for (let i = 0; i < steps.length; i++) {
    const [name, change] = steps[i]
    ctx.save()
    ctx.translate(55 + i * 90, 80)      // move to this slot
    change()
    ctx.fillStyle = `hsl(${i * 60}, 70%, 50%)`
    arrow()
    ctx.restore()                       // back to normal for the label
    ctx.fillStyle = "#333"
    ctx.fillText(name, 55 + i * 90, 150)
  }
}

function draw() {
  ctx.fillStyle = "#eef"
  ctx.fillRect(0, 0, width, height)
  ctx.save()
  const blurs = [0, 8, 24]
  for (let i = 0; i < blurs.length; i++) {
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)"
    ctx.shadowBlur = blurs[i]
    ctx.shadowOffsetX = 8
    ctx.shadowOffsetY = 8
    ctx.fillStyle = "tomato"
    ctx.fillRect(30 + i * 130, 30, 90, 90)
  }
  // a glow: coloured shadow, no offset
  ctx.shadowColor = "deepskyblue"
  ctx.shadowBlur = 30
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0
  ctx.fillStyle = "white"
  ctx.beginPath()
  ctx.arc(200, 210, 40, 0, Math.PI * 2)
  ctx.fill()
  ctx.restore()                // shadows off again
}

const modes = ["source-over", "destination-over", "source-in", "source-out", "source-atop",
  "destination-in", "destination-out", "destination-atop", "lighter", "copy", "xor",
  "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn",
  "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]

// Each mode gets its own little canvas, so one mode can't affect the others.
const tiles = modes.map((mode) => {
  const tile = document.createElement("canvas")
  tile.width = 80
  tile.height = 80
  const t = tile.getContext("2d")
  t.fillStyle = "royalblue"
  t.fillRect(5, 5, 45, 45)
  t.globalCompositeOperation = mode
  t.fillStyle = "crimson"
  t.beginPath()
  t.arc(48, 48, 26, 0, Math.PI * 2)
  t.fill()
  return tile
})

function draw() {
  ctx.fillStyle = "#eee"
  ctx.fillRect(0, 0, width, height)
  ctx.font = "10px sans-serif"
  ctx.textAlign = "center"
  ctx.fillStyle = "#222"
  for (let i = 0; i < modes.length; i++) {
    const x = 10 + (i % 7) * 92
    const y = 10 + Math.floor(i / 7) * 100
    ctx.drawImage(tiles[i], x, y)
    ctx.fillText(modes[i], x + 40, y + 92)
  }
}

let message = "Click inside or outside the star"

function starPath() {
  ctx.beginPath()
  for (let i = 0; i < 10; i++) {
    const r = i % 2 === 0 ? 110 : 45
    const a = i * Math.PI / 5 - Math.PI / 2
    ctx.lineTo(200 + r * Math.cos(a), 160 + r * Math.sin(a))
  }
  ctx.closePath()
}

function onMouseDown(x, y) {
  starPath()
  const inside = ctx.isPointInPath(x * pixelRatio, y * pixelRatio)
  message = inside ? "Inside the star!" : "Outside the star"
}

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  ctx.save()
  starPath()
  ctx.clip()                                // only the star shows from here...
  for (let i = 0; i < 12; i++) {
    ctx.fillStyle = `hsl(${i * 30}, 80%, 55%)`
    ctx.fillRect(0, i * 25, width, 25)      // ...so stripes become a striped star
  }
  ctx.restore()
  ctx.fillStyle = "#333"
  ctx.font = "18px sans-serif"
  ctx.fillText(message, 20, 310)
}

const heart = new Path2D("M 0 -12 C -8 -28 -36 -24 -36 -2 C -36 18 -10 30 0 40 C 10 30 36 18 36 -2 C 36 -24 8 -28 0 -12 Z")
const ring = new Path2D()
ring.arc(0, 0, 30, 0, Math.PI * 2)

function draw() {
  ctx.fillStyle = "#fff5f7"
  ctx.fillRect(0, 0, width, height)
  for (let i = 0; i < 5; i++) {
    ctx.save()
    ctx.translate(60 + i * 75, 80)
    ctx.scale(0.6 + i * 0.15, 0.6 + i * 0.15)
    ctx.fillStyle = `hsl(${340 + i * 8}, 80%, ${65 - i * 6}%)`
    ctx.fill(heart)
    ctx.restore()
    ctx.save()
    ctx.translate(60 + i * 75, 200)
    ctx.lineWidth = 2 + i * 2
    ctx.strokeStyle = "slateblue"
    ctx.stroke(ring)
    ctx.restore()
  }
}

// a small pattern made pixel by pixel, then shown big
const size = 32
const numbers = []
for (let y = 0; y < size; y++) {
  for (let x = 0; x < size; x++) {
    numbers.push(x * 8, y * 8, (x ^ y) * 8, 255)     // red, green, blue, alpha
  }
}
const pixels = new ImageData(new Uint8ClampedArray(numbers), size, size)

// put it on a small canvas, so it can be drawn scaled up
const tile = document.createElement("canvas")
tile.width = size
tile.height = size
tile.getContext("2d").putImageData(pixels, 0, 0)

function draw() {
  ctx.fillStyle = "black"
  ctx.fillRect(0, 0, width, height)
  ctx.imageSmoothingEnabled = false
  ctx.drawImage(tile, 20, 20, 256, 256)
}