2D Functions

import math

def draw():
    ctx.fill_style = "#f6f3ec"
    ctx.fill_rect(0, 0, width, height)
    ctx.line_width = 4
    ctx.stroke_style = "#333"

    ctx.fill_style = "tomato"
    ctx.fill_rect(20, 20, 100, 70)              # fill_rect
    ctx.stroke_rect(140, 20, 100, 70)           # stroke_rect

    ctx.begin_path()                            # round_rect, different corners
    ctx.round_rect(260, 20, 100, 70, [30, 4, 30, 4])
    ctx.fill_style = "gold"
    ctx.fill()
    ctx.stroke()

    ctx.begin_path()                            # arc: three-quarters of a circle
    ctx.move_to(70, 165)
    ctx.arc(70, 165, 50, 0, math.tau * 0.75)
    ctx.close_path()
    ctx.fill_style = "mediumseagreen"
    ctx.fill()

    ctx.begin_path()                            # ellipse, turned
    ctx.ellipse(190, 165, 60, 30, math.radians(20), 0, math.tau)
    ctx.fill_style = "deepskyblue"
    ctx.fill()

    ctx.begin_path()                            # arc_to: a rounded corner
    ctx.move_to(260, 120)
    ctx.arc_to(360, 120, 360, 220, 40)
    ctx.line_to(360, 220)
    ctx.stroke()

    ctx.begin_path()                            # quadratic and bezier curves
    ctx.move_to(20, 290)
    ctx.quadratic_curve_to(110, 220, 200, 290)
    ctx.bezier_curve_to(240, 220, 320, 360, 380, 270)
    ctx.stroke_style = "orchid"
    ctx.stroke()

t = 0

def update(dt):
    global t
    t += dt

def draw():
    ctx.fill_style = "white"
    ctx.fill_rect(0, 0, width, height)
    ctx.fill_style = "#333"
    ctx.font = "14px sans-serif"

    # line_cap: the thin line shows where each line really ends
    for i, cap in enumerate(["butt", "round", "square"]):
        y = 30 + i * 40
        ctx.line_width = 18
        ctx.line_cap = cap
        ctx.stroke_style = "steelblue"
        ctx.begin_path(); ctx.move_to(40, y); ctx.line_to(200, y); ctx.stroke()
        ctx.fill_text(cap, 225, y + 5)
    ctx.line_cap = "butt"
    ctx.line_width = 1
    ctx.stroke_style = "red"
    ctx.begin_path(); ctx.move_to(40, 10); ctx.line_to(40, 125)
    ctx.move_to(200, 10); ctx.line_to(200, 125); ctx.stroke()

    # line_join
    for i, join in enumerate(["miter", "round", "bevel"]):
        x = 40 + i * 120
        ctx.line_width = 18
        ctx.line_join = join
        ctx.stroke_style = "darkorange"
        ctx.begin_path(); ctx.move_to(x, 230); ctx.line_to(x + 40, 160); ctx.line_to(x + 80, 230); ctx.stroke()
        ctx.fill_text(join, x + 20, 260)

    # dashes, and dashes that march
    ctx.line_width = 4
    ctx.stroke_style = "#333"
    for i, dash in enumerate([[12, 6], [2, 6], [16, 4, 2, 4]]):
        ctx.set_line_dash(dash)
        ctx.line_dash_offset = -t * 20 if i == 0 else 0
        y = 290 + i * 25
        ctx.begin_path(); ctx.move_to(40, y); ctx.line_to(340, y); ctx.stroke()
    ctx.set_line_dash([])

def draw():
    ctx.fill_style = "white"
    ctx.fill_rect(0, 0, width, height)
    ctx.font = "20px sans-serif"

    # text_align: the red line is x
    ctx.stroke_style = "red"
    ctx.begin_path(); ctx.move_to(200, 10); ctx.line_to(200, 110); ctx.stroke()
    ctx.fill_style = "#222"
    for i, align in enumerate(["left", "center", "right"]):
        ctx.text_align = align
        ctx.fill_text(f"text_align {align}", 200, 35 + i * 30)

    # text_baseline: the red line is y
    ctx.text_align = "left"
    ctx.begin_path(); ctx.move_to(10, 170); ctx.line_to(width - 10, 170); ctx.stroke()
    ctx.font = "16px sans-serif"
    for i, base in enumerate(["top", "middle", "alphabetic", "bottom"]):
        ctx.text_baseline = base
        ctx.fill_text(base, 15 + i * 105, 170)
    ctx.text_baseline = "alphabetic"

    # outline, spacing, squeezing
    ctx.font = "bold 40px serif"
    ctx.line_width = 1.5
    ctx.stroke_style = "navy"
    ctx.stroke_text("Outline", 15, 250)
    ctx.font = "18px monospace"
    ctx.letter_spacing = "6px"
    ctx.fill_text("SPACED", 230, 250)
    ctx.letter_spacing = "0px"
    ctx.fill_text("This sentence is squeezed into 200 points", 15, 290, 200)

from urllib.parse import quote

# a 4 x 4 pixel picture, as an SVG drawing
svg = ("<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'>"
       "<rect width='4' height='4' fill='gold'/><rect x='1' y='1' width='1' height='1' fill='black'/>"
       "<rect x='2' y='1' width='1' height='1' fill='black'/><rect x='1' y='3' width='2' height='1' fill='black'/></svg>")
face = load_image("data:image/svg+xml," + quote(svg))

def draw():
    ctx.fill_style = "#dde"
    ctx.fill_rect(0, 0, width, height)
    ctx.draw_image(face, 20, 20)                           # its own size: tiny
    ctx.image_smoothing_enabled = True
    ctx.draw_image(face, 50, 20, 120, 120)                 # stretched, smoothed
    ctx.image_smoothing_enabled = False
    ctx.draw_image(face, 190, 20, 120, 120)                # stretched, crisp
    ctx.draw_image(face, 0, 0, 2, 2, 330, 20, 120, 120)    # just the top-left quarter

import math

def arrow():
    # an arrow drawn round (0, 0), pointing right
    ctx.begin_path()
    ctx.move_to(-30, -10); ctx.line_to(10, -10); ctx.line_to(10, -22)
    ctx.line_to(35, 0); ctx.line_to(10, 22); ctx.line_to(10, 10); ctx.line_to(-30, 10)
    ctx.close_path()
    ctx.fill()

def draw():
    ctx.fill_style = "white"
    ctx.fill_rect(0, 0, width, height)
    steps = [
        ("as drawn", lambda: None),
        ("rotate", lambda: ctx.rotate(math.radians(-45))),
        ("scale", lambda: ctx.scale(1.5, 0.6)),
        ("mirror", lambda: ctx.scale(-1, 1)),
        ("slant", lambda: ctx.transform(1, 0, 0.8, 1, 0, 0)),
    ]
    ctx.font = "14px sans-serif"
    ctx.text_align = "center"
    for i, (name, change) in enumerate(steps):
        ctx.save()
        ctx.translate(55 + i * 90, 80)      # move to this slot
        change()
        ctx.fill_style = f"hsl({i * 60}, 70%, 50%)"
        arrow()
        ctx.restore()                       # back to normal for the label
        ctx.fill_style = "#333"
        ctx.fill_text(name, 55 + i * 90, 150)

import math

def draw():
    ctx.fill_style = "#eef"
    ctx.fill_rect(0, 0, width, height)
    ctx.save()
    for i, blur in enumerate([0, 8, 24]):
        ctx.shadow_color = "rgba(0, 0, 0, 0.5)"
        ctx.shadow_blur = blur
        ctx.shadow_offset_x = 8
        ctx.shadow_offset_y = 8
        ctx.fill_style = "tomato"
        ctx.fill_rect(30 + i * 130, 30, 90, 90)
    # a glow: coloured shadow, no offset
    ctx.shadow_color = "deepskyblue"
    ctx.shadow_blur = 30
    ctx.shadow_offset_x = 0
    ctx.shadow_offset_y = 0
    ctx.fill_style = "white"
    ctx.begin_path()
    ctx.arc(200, 210, 40, 0, math.tau)
    ctx.fill()
    ctx.restore()                # shadows off again

import math

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.
tiles = []
for mode in modes:
    tile = js.document.create_element("canvas")
    tile.width = 80
    tile.height = 80
    t = tile.get_context("2d")
    t.fill_style = "royalblue"
    t.fill_rect(5, 5, 45, 45)
    t.global_composite_operation = mode
    t.fill_style = "crimson"
    t.begin_path()
    t.arc(48, 48, 26, 0, math.tau)
    t.fill()
    tiles.append(tile)

def draw():
    ctx.fill_style = "#eee"
    ctx.fill_rect(0, 0, width, height)
    ctx.font = "10px sans-serif"
    ctx.text_align = "center"
    ctx.fill_style = "#222"
    for i, (mode, tile) in enumerate(zip(modes, tiles)):
        x, y = 10 + (i % 7) * 92, 10 + (i // 7) * 100
        ctx.draw_image(tile, x, y)
        ctx.fill_text(mode, x + 40, y + 92)

# Click or tap inside or outside the star.
import math

message = ""

def star_path():
    ctx.begin_path()
    for i in range(10):
        r = 110 if i % 2 == 0 else 45
        a = i * math.pi / 5 - math.pi / 2
        ctx.line_to(200 + r * math.cos(a), 160 + r * math.sin(a))
    ctx.close_path()

async def clicked(event):
    global message
    star_path()
    inside = await ctx.is_point_in_path(event.x * pixel_ratio, event.y * pixel_ratio)
    message = "Inside the star!" if inside else "Outside the star"

canvas.add_event_listener("pointerdown", clicked)

def draw():
    ctx.fill_style = "white"
    ctx.fill_rect(0, 0, width, height)
    ctx.save()
    star_path()
    ctx.clip()                                # only the star shows from here...
    for i in range(12):
        ctx.fill_style = f"hsl({i * 30}, 80%, 55%)"
        ctx.fill_rect(0, i * 25, width, 25)  # ...so stripes become a striped star
    ctx.restore()
    ctx.fill_style = "#333"
    ctx.font = "18px sans-serif"
    ctx.fill_text(message, 20, 310)

heart = js.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")
ring = js.Path2D()
ring.arc(0, 0, 30, 0, 6.283)

def draw():
    ctx.fill_style = "#fff5f7"
    ctx.fill_rect(0, 0, width, height)
    for i in range(5):
        ctx.save()
        ctx.translate(60 + i * 75, 80)
        ctx.scale(0.6 + i * 0.15, 0.6 + i * 0.15)
        ctx.fill_style = f"hsl({340 + i * 8}, 80%, {65 - i * 6}%)"
        ctx.fill(heart)
        ctx.restore()
        ctx.save()
        ctx.translate(60 + i * 75, 200)
        ctx.line_width = 2 + i * 2
        ctx.stroke_style = "slateblue"
        ctx.stroke(ring)
        ctx.restore()

# a small pattern made pixel by pixel, then shown big
size = 32
numbers = []
for y in range(size):
    for x in range(size):
        numbers += [x * 8, y * 8, (x ^ y) * 8, 255]     # red, green, blue, alpha
pixels = js.ImageData(js.Uint8ClampedArray(numbers), size, size)

# put it on a small canvas, so it can be drawn scaled up
tile = js.document.create_element("canvas")
tile.width = size
tile.height = size
tile.get_context("2d").put_image_data(pixels, 0, 0)

def draw():
    ctx.fill_style = "black"
    ctx.fill_rect(0, 0, width, height)
    ctx.image_smoothing_enabled = False
    ctx.draw_image(tile, 20, 20, 256, 256)