678 lines
14 KiB
Nim
678 lines
14 KiB
Nim
import chroma, pixie
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 160))
|
|
|
|
ctx.beginPath()
|
|
ctx.fillStyle = "#ff6"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
ctx.beginPath()
|
|
ctx.fillStyle = "blue"
|
|
ctx.moveTo(20, 20)
|
|
ctx.lineTo(180, 20)
|
|
ctx.lineTo(130, 130)
|
|
ctx.closePath()
|
|
ctx.fill()
|
|
|
|
ctx.clearRect(10, 10, 120, 100)
|
|
|
|
ctx.image.writeFile("tests/contexts/clearRect_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.beginPath()
|
|
ctx.strokeStyle = "blue"
|
|
ctx.moveTo(20, 20)
|
|
ctx.lineTo(200, 20)
|
|
ctx.stroke()
|
|
|
|
ctx.beginPath()
|
|
ctx.strokeStyle = "green"
|
|
ctx.moveTo(20, 20)
|
|
ctx.lineTo(120, 120)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/beginPath_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(50, 50)
|
|
ctx.lineTo(200, 50)
|
|
ctx.moveTo(50, 90)
|
|
ctx.lineTo(280, 120)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/moveTo_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
let region = newPath()
|
|
region.moveTo(30, 90)
|
|
region.lineTo(110, 20)
|
|
region.lineTo(240, 130)
|
|
region.lineTo(60, 130)
|
|
region.lineTo(190, 20)
|
|
region.lineTo(270, 90)
|
|
region.closePath()
|
|
|
|
ctx.fillStyle = "green"
|
|
ctx.fill(region, EvenOdd)
|
|
|
|
ctx.image.writeFile("tests/contexts/fill_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.rect(10, 10, 150, 100)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/stroke_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.lineWidth = 26
|
|
ctx.strokeStyle = "orange"
|
|
ctx.moveTo(20, 20)
|
|
ctx.lineTo(160, 20)
|
|
ctx.stroke()
|
|
|
|
ctx.lineWidth = 14
|
|
ctx.strokeStyle = "green"
|
|
ctx.moveTo(20, 80)
|
|
ctx.lineTo(220, 80)
|
|
ctx.stroke()
|
|
|
|
ctx.lineWidth = 4
|
|
ctx.strokeStyle = "pink"
|
|
ctx.moveTo(20, 140)
|
|
ctx.lineTo(280, 140)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/stroke_2.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.lineWidth = 26
|
|
ctx.strokeStyle = "red"
|
|
|
|
ctx.beginPath()
|
|
ctx.rect(25, 25, 100, 100)
|
|
ctx.fill()
|
|
ctx.stroke()
|
|
|
|
ctx.beginPath()
|
|
ctx.rect(175, 25, 100, 100)
|
|
ctx.stroke()
|
|
ctx.fill()
|
|
|
|
ctx.image.writeFile("tests/contexts/stroke_3.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(20, 140)
|
|
ctx.lineTo(120, 10)
|
|
ctx.lineTo(220, 140)
|
|
ctx.closePath()
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/closePath_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
let
|
|
start = vec2(50, 20)
|
|
cp1 = vec2(230, 30)
|
|
cp2 = vec2(150, 80)
|
|
to = vec2(250, 100)
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(start)
|
|
ctx.bezierCurveTo(cp1, cp2, to)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/bezierCurveTo_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(30, 30)
|
|
ctx.bezierCurveTo(120, 160, 180, 10, 220, 140)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/bezierCurveTo_2.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.moveTo(50, 20)
|
|
ctx.quadraticCurveTo(230, 30, 50, 100)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/quadracticCurveTo_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.beginPath()
|
|
ctx.moveTo(20, 110)
|
|
ctx.quadraticCurveTo(230, 150, 250, 20)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/quadracticCurveTo_2.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.beginPath()
|
|
ctx.ellipse(100, 75, 75, 50)
|
|
ctx.stroke()
|
|
|
|
ctx.image.writeFile("tests/contexts/ellipse_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.strokeStyle = "green"
|
|
ctx.strokeRect(20, 10, 160, 100)
|
|
|
|
ctx.image.writeFile("tests/contexts/strokeRect_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.lineJoin = BevelJoin
|
|
ctx.lineWidth = 15
|
|
ctx.strokeStyle = "#38f"
|
|
ctx.strokeRect(30, 30, 160, 90)
|
|
|
|
ctx.image.writeFile("tests/contexts/strokeRect_2.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.setTransform(mat3(1, 0.2, 0, 0.8, 1, 0, 0, 0, 1))
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.image.writeFile("tests/contexts/setTransform_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.setTransform(mat3(1, 0.2, 0, 0.8, 1, 0, 0, 0, 1))
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.image.writeFile("tests/contexts/resetTransform_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.rotate(45 * PI / 180)
|
|
ctx.fillRect(60, 0, 100, 30)
|
|
|
|
ctx.image.writeFile("tests/contexts/resetTransform_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.transform(mat3(1, 0, 0, 1.7, 1, 0, 0, 0, 1))
|
|
ctx.fillStyle = "gray"
|
|
ctx.fillRect(40, 40, 50, 20)
|
|
ctx.fillRect(40, 90, 50, 20)
|
|
|
|
ctx.resetTransform()
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(40, 40, 50, 20)
|
|
ctx.fillRect(40, 90, 50, 20)
|
|
|
|
ctx.image.writeFile("tests/contexts/resetTransform_2.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.translate(110, 30)
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(0, 0, 80, 80)
|
|
|
|
ctx.setTransform(mat3(1, 0, 0, 0, 1, 0, 0, 0, 1))
|
|
|
|
ctx.fillStyle = "gray"
|
|
ctx.fillRect(0, 0, 80, 80)
|
|
|
|
ctx.image.writeFile("tests/contexts/translate_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.scale(9, 3)
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(10, 10, 8, 20)
|
|
|
|
ctx.setTransform(mat3(1, 0, 0, 0, 1, 0, 0, 0, 1))
|
|
|
|
ctx.fillStyle = "gray"
|
|
ctx.fillRect(10, 10, 8, 20)
|
|
|
|
ctx.image.writeFile("tests/contexts/scale_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.fillStyle = "gray"
|
|
ctx.fillRect(100, 0, 80, 20)
|
|
|
|
ctx.rotate(45 * PI / 180)
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(100, 0, 80, 20)
|
|
|
|
ctx.image.writeFile("tests/contexts/rotate_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.font = "tests/fonts/Roboto-Regular_1.ttf"
|
|
ctx.fontSize = 50
|
|
ctx.save()
|
|
ctx.fontSize = 30
|
|
ctx.restore()
|
|
|
|
ctx.fillText("Hello world", 50, 90)
|
|
|
|
ctx.image.writeFile("tests/contexts/fillText_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.font = "tests/fonts/Roboto-Regular_1.ttf"
|
|
ctx.fontSize = 50
|
|
|
|
ctx.strokeText("Hello world", 50, 90)
|
|
|
|
ctx.image.writeFile("tests/contexts/strokeText_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.save()
|
|
|
|
ctx.fillStyle = "green"
|
|
ctx.fillRect(10, 10, 100, 100)
|
|
|
|
ctx.restore()
|
|
|
|
ctx.fillRect(150, 40, 100, 100)
|
|
|
|
ctx.image.writeFile("tests/contexts/save_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.beginPath()
|
|
ctx.circle(100, 75, 50)
|
|
ctx.clip()
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
ctx.fillStyle = "orange"
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.image.writeFile("tests/contexts/clip_1.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
ctx.beginPath()
|
|
ctx.circle(100, 75, 50)
|
|
ctx.clip()
|
|
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
ctx.fillStyle = "orange"
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.image.writeFile("tests/contexts/clip_1b.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.save()
|
|
|
|
ctx.beginPath()
|
|
ctx.circle(100, 75, 50)
|
|
ctx.clip()
|
|
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
ctx.fillStyle = "orange"
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.restore()
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
ctx.image.writeFile("tests/contexts/clip_1c.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
ctx.beginPath()
|
|
ctx.circle(100, 75, 50)
|
|
ctx.clip()
|
|
|
|
ctx.saveLayer()
|
|
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
ctx.fillStyle = "orange"
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.restore()
|
|
|
|
ctx.image.writeFile("tests/contexts/clip_1d.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.save()
|
|
|
|
ctx.beginPath()
|
|
ctx.circle(100, 75, 50)
|
|
ctx.clip()
|
|
|
|
ctx.saveLayer()
|
|
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
ctx.fillStyle = "orange"
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.restore() # Pop the layer
|
|
ctx.restore() # Pop the clip
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
ctx.image.writeFile("tests/contexts/clip_1e.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
ctx.save()
|
|
|
|
ctx.beginPath()
|
|
ctx.circle(100, 75, 50)
|
|
ctx.clip()
|
|
|
|
ctx.saveLayer()
|
|
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
ctx.restore()
|
|
ctx.saveLayer()
|
|
|
|
ctx.fillStyle = "orange"
|
|
ctx.fillRect(0, 0, 100, 100)
|
|
|
|
ctx.restore() # Pop the layer
|
|
|
|
ctx.image.writeFile("tests/contexts/clip_1f.png")
|
|
|
|
block:
|
|
let ctx = newContext(newImage(300, 150))
|
|
|
|
let region = newPath()
|
|
region.rect(80, 10, 20, 130)
|
|
region.rect(40, 50, 100, 50)
|
|
ctx.clip(region, EvenOdd)
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
ctx.image.writeFile("tests/contexts/clip_2.png")
|
|
|
|
block:
|
|
let image = newImage(300, 150)
|
|
|
|
let ctx = newContext(image)
|
|
|
|
var circlePath = newPath()
|
|
circlePath.circle(150, 75, 75)
|
|
var squarePath = newPath()
|
|
squarePath.rect(85, 10, 130, 130)
|
|
|
|
ctx.clip(circlePath)
|
|
ctx.clip(squarePath)
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
|
|
image.writeFile("tests/contexts/clip_3.png")
|
|
|
|
block:
|
|
let image = newImage(300, 150)
|
|
|
|
let ctx = newContext(image)
|
|
ctx.font = "tests/fonts/Roboto-Regular_1.ttf"
|
|
ctx.fontSize = 50
|
|
ctx.fillStyle = "blue"
|
|
|
|
ctx.saveLayer()
|
|
|
|
var circlePath = newPath()
|
|
circlePath.circle(150, 75, 75)
|
|
|
|
ctx.clip(circlePath)
|
|
|
|
ctx.fillText("Hello world", 50, 90)
|
|
|
|
ctx.restore()
|
|
|
|
image.writeFile("tests/contexts/clip_text.png")
|
|
|
|
block:
|
|
let ctx = newContext(100, 100)
|
|
ctx.font = "tests/fonts/Roboto-Regular_1.ttf"
|
|
|
|
let metrics = ctx.measureText("Hello world")
|
|
doAssert metrics.width == 60
|
|
|
|
block:
|
|
let
|
|
image = newImage(300, 150)
|
|
ctx = newContext(image)
|
|
|
|
var y = 15.float32
|
|
|
|
proc drawDashedLine(pattern: seq[float32]) =
|
|
ctx.beginPath()
|
|
ctx.setLineDash(pattern)
|
|
ctx.moveTo(0, y)
|
|
ctx.lineTo(300, y)
|
|
ctx.stroke()
|
|
y += 20
|
|
|
|
drawDashedLine(@[])
|
|
drawDashedLine(@[1.float32, 1])
|
|
drawDashedLine(@[10.float32, 10])
|
|
drawDashedLine(@[20.float32, 5])
|
|
drawDashedLine(@[15.float32, 3, 3, 3])
|
|
drawDashedLine(@[20.float32, 3, 3, 3, 3, 3, 3, 3])
|
|
drawDashedLine(@[12.float32, 3, 3])
|
|
|
|
image.writeFile("tests/contexts/setLineDash_1.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(300, 150)
|
|
ctx = newContext(image)
|
|
|
|
image.fill(rgba(255, 255, 255, 255))
|
|
|
|
let paint = newPaint(SolidPaint)
|
|
paint.color = color(0, 0, 1, 1)
|
|
paint.blendMode = ExclusionBlend
|
|
|
|
ctx.fillStyle = paint
|
|
|
|
ctx.fillRect(10, 10, 100, 100)
|
|
|
|
image.writeFile("tests/contexts/blendmode_1.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(300, 150)
|
|
ctx = newContext(image)
|
|
|
|
image.fill(rgba(255, 255, 255, 255))
|
|
|
|
ctx.globalAlpha = 0.5
|
|
|
|
ctx.fillStyle = "blue"
|
|
ctx.fillRect(10, 10, 100, 100)
|
|
|
|
ctx.fillStyle = "red"
|
|
ctx.fillRect(50, 50, 100, 100)
|
|
|
|
image.writeFile("tests/contexts/globalAlpha_1.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(100, 100)
|
|
ctx = newContext(image)
|
|
testImage = readImage("tests/images/pip1.png")
|
|
ctx.drawImage(testImage, 0, 0)
|
|
ctx.drawImage(testImage, 30, 30)
|
|
image.writeFile("tests/contexts/draw_image.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(100, 100)
|
|
ctx = newContext(image)
|
|
testImage = readImage("tests/images/pip1.png")
|
|
ctx.translate(30, 30)
|
|
ctx.drawImage(testImage, -30, -30)
|
|
ctx.drawImage(testImage, 0, 0)
|
|
image.writeFile("tests/contexts/draw_image_translated.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(100, 100)
|
|
ctx = newContext(image)
|
|
testImage = readImage("tests/images/pip1.png")
|
|
ctx.scale(2, 2)
|
|
ctx.drawImage(testImage, 0, 0)
|
|
ctx.scale(0.25, 0.25)
|
|
ctx.drawImage(testImage, 0, 0)
|
|
image.writeFile("tests/contexts/draw_image_scaled.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(100, 100)
|
|
ctx = newContext(image)
|
|
testImage = readImage("tests/images/pip1.png")
|
|
ctx.drawImage(testImage, 30, 30, 20, 20)
|
|
image.writeFile("tests/contexts/draw_image_self_scaled.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(300, 227)
|
|
ctx = newContext(image)
|
|
rhino = readImage("tests/images/rhino.png")
|
|
ctx.drawImage(rhino, 33, 71, 104, 124, 21, 20, 87, 104)
|
|
image.writeFile("tests/contexts/draw_image_rhino.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(300, 227)
|
|
ctx = newContext(image)
|
|
rhino = readImage("tests/images/rhino.png")
|
|
ctx.drawImage(rhino, rect(33, 71, 104, 124), rect(21, 20, 87, 104))
|
|
image.writeFile("tests/contexts/draw_image_rhino2.png")
|
|
|
|
block:
|
|
let
|
|
image = newImage(100, 100)
|
|
ctx = newContext(image)
|
|
ctx.rect(10, 10, 100, 100)
|
|
doAssert ctx.isPointInPath(30, 70)
|
|
|
|
block:
|
|
let
|
|
image = newImage(300, 150)
|
|
ctx = newContext(image)
|
|
ctx.arc(150, 75, 50, 0, 2 * PI)
|
|
doAssert ctx.isPointInPath(150, 50)
|
|
|
|
block:
|
|
let
|
|
image = newImage(100, 100)
|
|
ctx = newContext(image)
|
|
ctx.rect(10, 10, 100, 100)
|
|
doAssert ctx.isPointInStroke(50, 10)
|
|
|
|
block:
|
|
let
|
|
image = newImage(300, 150)
|
|
ctx = newContext(image)
|
|
ctx.ellipse(150, 75, 40, 60)
|
|
ctx.lineWidth = 25
|
|
doAssert ctx.isPointInStroke(110, 75)
|
|
|
|
block:
|
|
let ctx = newContext(newImage(100, 100))
|
|
ctx.fillStyle.color = color(1, 0, 0, 1)
|
|
ctx.save()
|
|
ctx.fillStyle.color = color(0, 0, 1, 1)
|
|
ctx.restore()
|
|
ctx.fillRect(0, 0, ctx.image.width.float32, ctx.image.height.float32)
|
|
ctx.image.writeFile("tests/contexts/paintSaveRestore.png")
|
|
|
|
block:
|
|
# From https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline
|
|
let
|
|
image = newImage(550, 500)
|
|
ctx = newContext(image)
|
|
image.fill(rgba(255, 255, 255, 255))
|
|
|
|
const baselines = @[
|
|
TopBaseAlign,
|
|
HangingBaseAlign,
|
|
MiddleBaseAlign,
|
|
AlphabeticBaseAlign,
|
|
IdeographicBaseAlign,
|
|
BottomBaseAlign,
|
|
]
|
|
|
|
ctx.font = "tests/fonts/Roboto-Regular_1.ttf"
|
|
ctx.fontSize = 28
|
|
ctx.strokeStyle = "red"
|
|
|
|
for index, baseline in baselines:
|
|
ctx.textBaseline = baseline
|
|
let y = (75 + index * 75).float32
|
|
ctx.beginPath()
|
|
ctx.moveTo(0, y + 0.5)
|
|
ctx.lineTo(550, y + 0.5)
|
|
ctx.stroke()
|
|
ctx.fillText("Abcdefghijklmnop (" & $baseline & ")", 0, y)
|
|
|
|
ctx.image.writeFile("tests/contexts/textBaseline_1.png")
|