From 5cc8e911d177a266b7fb7418c355f6f1b15502f6 Mon Sep 17 00:00:00 2001 From: Ryan Oldenburg Date: Thu, 20 May 2021 23:48:59 -0500 Subject: [PATCH] move image helpers from pixie.nim to context.nim --- README.md | 36 +++++--- examples/line.nim | 7 +- examples/masking.nim | 11 ++- examples/rounded_rectangle.nim | 5 +- examples/shadow.nim | 9 +- examples/square.nim | 5 +- src/pixie.nim | 164 --------------------------------- src/pixie/context.nim | 113 ++++++++++++++++++++--- src/pixie/paints.nim | 4 +- src/pixie/paths.nim | 8 +- tests/test_fonts.nim | 12 ++- tests/test_images.nim | 22 +++-- tests/test_images_draw.nim | 125 ++++++++++--------------- 13 files changed, 230 insertions(+), 291 deletions(-) diff --git a/README.md b/README.md index 431def0..23e4627 100644 --- a/README.md +++ b/README.md @@ -137,35 +137,44 @@ image.fillText(typeset(spans, bounds = vec2(180, 180)), vec2(10, 10)) ### Square [examples/square.nim](examples/square.nim) ```nim +let ctx = newContext(image) +ctx.fillStyle = rgba(255, 0, 0, 255) + let pos = vec2(50, 50) wh = vec2(100, 100) -image.fillRect(rect(pos, wh), rgba(255, 0, 0, 255)) +ctx.fillRect(rect(pos, wh)) ``` ![example output](examples/square.png) ### Line [examples/line.nim](examples/line.nim) ```nim +let ctx = newContext(image) +ctx.strokeStyle = "#FF5C00" +ctx.lineWidth = 10 + let start = vec2(25, 25) stop = vec2(175, 175) - color = parseHtmlColor("#FF5C00").rgba -image.strokeSegment(segment(start, stop), color, strokeWidth = 10) +ctx.strokeSegment(segment(start, stop)) ``` ![example output](examples/line.png) ### Rounded rectangle [examples/rounded_rectangle.nim](examples/rounded_rectangle.nim) ```nim +let ctx = newContext(image) +ctx.fillStyle = rgba(0, 255, 0, 255) + let pos = vec2(50, 50) wh = vec2(100, 100) r = 25.0 -image.fillRoundedRect(rect(pos, wh), r, rgba(0, 255, 0, 255)) +ctx.fillRoundedRect(rect(pos, wh), r) ``` ![example output](examples/rounded_rectangle.png) @@ -189,10 +198,12 @@ image.fillPath( ### Masking [examples/masking.nim](examples/masking.nim) ```nim -lines.strokeSegment( - segment(vec2(25, 25), vec2(175, 175)), color, strokeWidth = 30) -lines.strokeSegment( - segment(vec2(25, 175), vec2(175, 25)), color, strokeWidth = 30) +let ctx = newContext(lines) +ctx.strokeStyle = "#F8D1DD" +ctx.lineWidth = 30 + +ctx.strokeSegment(segment(vec2(25, 25), vec2(175, 175))) +ctx.strokeSegment(segment(vec2(25, 175), vec2(175, 25))) mask.fillPath( """ @@ -263,11 +274,14 @@ image.fillPath( [examples/shadow.nim](examples/shadow.nim) ```nim let polygonImage = newImage(200, 200) -polygonImage.fillPolygon( + +let ctx = newContext(polygonImage) +ctx.fillStyle = rgba(255, 255, 255, 255) + +ctx.fillPolygon( vec2(100, 100), 70, - sides = 8, - rgba(255, 255, 255, 255) + sides = 8 ) let shadow = polygonImage.shadow( diff --git a/examples/line.nim b/examples/line.nim index 24f9b76..dc9e7c3 100644 --- a/examples/line.nim +++ b/examples/line.nim @@ -3,11 +3,14 @@ import pixie let image = newImage(200, 200) image.fill(rgba(255, 255, 255, 255)) +let ctx = newContext(image) +ctx.strokeStyle = "#FF5C00" +ctx.lineWidth = 10 + let start = vec2(25, 25) stop = vec2(175, 175) - color = parseHtmlColor("#FF5C00").rgba -image.strokeSegment(segment(start, stop), color, strokeWidth = 10) +ctx.strokeSegment(segment(start, stop)) image.writeFile("examples/line.png") diff --git a/examples/masking.nim b/examples/masking.nim index a074049..535c10b 100644 --- a/examples/masking.nim +++ b/examples/masking.nim @@ -4,15 +4,16 @@ let image = newImage(200, 200) lines = newImage(200, 200) mask = newMask(200, 200) - color = parseHtmlColor("#F8D1DD").rgba lines.fill(parseHtmlColor("#FC427B").rgba) image.fill(rgba(255, 255, 255, 255)) -lines.strokeSegment( - segment(vec2(25, 25), vec2(175, 175)), color, strokeWidth = 30) -lines.strokeSegment( - segment(vec2(25, 175), vec2(175, 25)), color, strokeWidth = 30) +let ctx = newContext(lines) +ctx.strokeStyle = "#F8D1DD" +ctx.lineWidth = 30 + +ctx.strokeSegment(segment(vec2(25, 25), vec2(175, 175))) +ctx.strokeSegment(segment(vec2(25, 175), vec2(175, 25))) mask.fillPath( """ diff --git a/examples/rounded_rectangle.nim b/examples/rounded_rectangle.nim index 79bc160..c500694 100644 --- a/examples/rounded_rectangle.nim +++ b/examples/rounded_rectangle.nim @@ -3,11 +3,14 @@ import pixie let image = newImage(200, 200) image.fill(rgba(255, 255, 255, 255)) +let ctx = newContext(image) +ctx.fillStyle = rgba(0, 255, 0, 255) + let pos = vec2(50, 50) wh = vec2(100, 100) r = 25.0 -image.fillRoundedRect(rect(pos, wh), r, rgba(0, 255, 0, 255)) +ctx.fillRoundedRect(rect(pos, wh), r) image.writeFile("examples/rounded_rectangle.png") diff --git a/examples/shadow.nim b/examples/shadow.nim index 399ab9b..a4ed263 100644 --- a/examples/shadow.nim +++ b/examples/shadow.nim @@ -4,11 +4,14 @@ let image = newImage(200, 200) image.fill(rgba(255, 255, 255, 255)) let polygonImage = newImage(200, 200) -polygonImage.fillPolygon( + +let ctx = newContext(polygonImage) +ctx.fillStyle = rgba(255, 255, 255, 255) + +ctx.fillPolygon( vec2(100, 100), 70, - sides = 8, - rgba(255, 255, 255, 255) + sides = 8 ) let shadow = polygonImage.shadow( diff --git a/examples/square.nim b/examples/square.nim index 1942f17..7c544b2 100644 --- a/examples/square.nim +++ b/examples/square.nim @@ -3,10 +3,13 @@ import pixie let image = newImage(200, 200) image.fill(rgba(255, 255, 255, 255)) +let ctx = newContext(image) +ctx.fillStyle = rgba(255, 0, 0, 255) + let pos = vec2(50, 50) wh = vec2(100, 100) -image.fillRect(rect(pos, wh), rgba(255, 0, 0, 255)) +ctx.fillRect(rect(pos, wh)) image.writeFile("examples/square.png") diff --git a/src/pixie.nim b/src/pixie.nim index f1eb8c2..822f11a 100644 --- a/src/pixie.nim +++ b/src/pixie.nim @@ -78,17 +78,6 @@ proc writeFile*(image: Image, filePath: string) = raise newException(PixieError, "Unsupported image file extension") image.writeFile(filePath, fileformat) -proc fillRect*( - image: Image, - rect: Rect, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0) -) = - ## Fills a rectangle. - var path: Path - path.rect(rect) - image.fillPath(path, color, transform) - proc fillRect*( mask: Mask, rect: Rect, @@ -99,18 +88,6 @@ proc fillRect*( path.rect(rect) mask.fillPath(path, transform) -proc strokeRect*( - image: Image, - rect: Rect, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - strokeWidth = 1.0 -) = - ## Strokes a rectangle. - var path: Path - path.rect(rect) - image.strokePath(path, color, transform, strokeWidth) - proc strokeRect*( mask: Mask, rect: Rect, @@ -122,30 +99,6 @@ proc strokeRect*( path.rect(rect) mask.strokePath(path, transform, strokeWidth) -proc fillRoundedRect*( - image: Image, - rect: Rect, - nw, ne, se, sw: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0) -) = - ## Fills a rounded rectangle. - var path: Path - path.roundedRect(rect, nw, ne, se, sw) - image.fillPath(path, color, transform) - -proc fillRoundedRect*( - image: Image, - rect: Rect, - radius: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0) -) = - ## Fills a rounded rectangle. - var path: Path - path.roundedRect(rect, radius, radius, radius, radius) - image.fillPath(path, color, transform) - proc fillRoundedRect*( mask: Mask, rect: Rect, @@ -168,32 +121,6 @@ proc fillRoundedRect*( path.roundedRect(rect, radius, radius, radius, radius) mask.fillPath(path, transform) -proc strokeRoundedRect*( - image: Image, - rect: Rect, - nw, ne, se, sw: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - strokeWidth = 1.0 -) = - ## Strokes a rounded rectangle. - var path: Path - path.roundedRect(rect, nw, ne, se, sw) - image.strokePath(path, color, transform, strokeWidth) - -proc strokeRoundedRect*( - image: Image, - rect: Rect, - radius: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - strokeWidth = 1.0 -) = - ## Strokes a rounded rectangle. - var path: Path - path.roundedRect(rect, radius, radius, radius, radius) - image.strokePath(path, color, transform, strokeWidth) - proc strokeRoundedRect*( mask: Mask, rect: Rect, @@ -218,19 +145,6 @@ proc strokeRoundedRect*( path.roundedRect(rect, radius, radius, radius, radius) mask.strokePath(path, transform, strokeWidth) -proc strokeSegment*( - image: Image, - segment: Segment, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - strokeWidth = 1.0 -) = - ## Strokes a segment (draws a line from segment.at to segment.to). - var path: Path - path.moveTo(segment.at) - path.lineTo(segment.to) - image.strokePath(path, color, transform, strokeWidth) - proc strokeSegment*( mask: Mask, segment: Segment, @@ -243,19 +157,6 @@ proc strokeSegment*( path.lineTo(segment.to) mask.strokePath(path, transform, strokeWidth) -proc fillEllipse*( - image: Image, - center: Vec2, - rx, ry: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - blendMode = bmNormal -) = - ## Fills an ellipse. - var path: Path - path.ellipse(center, rx, ry) - image.fillPath(path, color, transform, wrNonZero, blendMode) - proc fillEllipse*( mask: Mask, center: Vec2, @@ -267,19 +168,6 @@ proc fillEllipse*( path.ellipse(center, rx, ry) mask.fillPath(path, transform) -proc strokeEllipse*( - image: Image, - center: Vec2, - rx, ry: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - strokeWidth = 1.0 -) = - ## Strokes an ellipse. - var path: Path - path.ellipse(center, rx, ry) - image.strokePath(path, color, transform, strokeWidth) - proc strokeEllipse*( mask: Mask, center: Vec2, @@ -292,18 +180,6 @@ proc strokeEllipse*( path.ellipse(center, rx, ry) mask.strokePath(path, transform, strokeWidth) -proc fillCircle*( - image: Image, - center: Vec2, - radius: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0) -) = - ## Fills a circle. - var path: Path - path.ellipse(center, radius, radius) - image.fillPath(path, color, transform) - proc fillCircle*( mask: Mask, center: Vec2, @@ -315,19 +191,6 @@ proc fillCircle*( path.ellipse(center, radius, radius) mask.fillPath(path, transform) -proc strokeCircle*( - image: Image, - center: Vec2, - radius: float32, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - strokeWidth = 1.0 -) = - ## Strokes a circle. - var path: Path - path.ellipse(center, radius, radius) - image.strokePath(path, color, transform, strokeWidth) - proc strokeCircle*( mask: Mask, center: Vec2, @@ -340,19 +203,6 @@ proc strokeCircle*( path.ellipse(center, radius, radius) mask.fillPath(path, transform, strokeWidth) -proc fillPolygon*( - image: Image, - pos: Vec2, - size: float32, - sides: int, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0) -) = - ## Fills a polygon. - var path: Path - path.polygon(pos, size, sides) - image.fillPath(path, color, transform) - proc fillPolygon*( mask: Mask, pos: Vec2, @@ -365,20 +215,6 @@ proc fillPolygon*( path.polygon(pos, size, sides) mask.fillPath(path, transform) -proc strokePolygon*( - image: Image, - pos: Vec2, - size: float32, - sides: int, - color: SomeColor, - transform: Vec2 | Mat3 = vec2(0, 0), - strokeWidth = 1.0 -) = - ## Strokes a polygon. - var path: Path - path.polygon(pos, size, sides) - image.strokePath(path, color, transform, strokeWidth) - proc strokePolygon*( mask: Mask, pos: Vec2, diff --git a/src/pixie/context.nim b/src/pixie/context.nim index 346181b..c90c987 100644 --- a/src/pixie/context.nim +++ b/src/pixie/context.nim @@ -136,9 +136,9 @@ proc stroke*(ctx: Context, path: Path) {.inline.} = path, ctx.strokeStyle, ctx.mat, - strokeWidth = ctx.lineWidth, - lineCap = ctx.lineCap, - lineJoin = ctx.lineJoin + ctx.lineWidth, + ctx.lineCap, + ctx.lineJoin ) proc stroke*(ctx: Context) {.inline.} = @@ -159,7 +159,7 @@ proc fillRect*(ctx: Context, rect: Rect) = ## Draws a rectangle that is filled according to the current fillStyle. var path: Path path.rect(rect) - ctx.image.fillPath(path, ctx.fillStyle, ctx.mat) + ctx.fill(path) proc fillRect*(ctx: Context, x, y, width, height: float32) {.inline.} = ## Draws a rectangle that is filled according to the current fillStyle. @@ -170,14 +170,7 @@ proc strokeRect*(ctx: Context, rect: Rect) = ## strokeStyle and other context settings. var path: Path path.rect(rect) - ctx.image.strokePath( - path, - ctx.strokeStyle, - ctx.mat, - ctx.lineWidth, - ctx.lineCap, - ctx.lineJoin - ) + ctx.stroke(path) proc strokeRect*(ctx: Context, x, y, width, height: float32) {.inline.} = ## Draws a rectangle that is stroked (outlined) according to the current @@ -311,3 +304,99 @@ proc restore*(ctx: Context) = ctx.lineJoin = state.lineJoin ctx.font = state.font ctx.textAlign = state.textAlign + +# Additional procs that are not part of the JS API + +proc roundedRect*(ctx: Context, x, y, w, h, nw, ne, se, sw: float32) {.inline.} = + ## Adds a rounded rectangle to the current path. + ctx.path.roundedRect(x, y, w, h, nw, ne, se, sw) + +proc roundedRect*(ctx: Context, rect: Rect, nw, ne, se, sw: float32) {.inline.} = + ## Adds a rounded rectangle to the current path. + ctx.path.roundedRect(rect, nw, ne, se, sw) + +proc circle*(ctx: Context, cx, cy, r: float32) {.inline.} = + ## Adds a circle to the current path. + ctx.path.circle(cx, cy, r) + +proc circle*(ctx: Context, center: Vec2, r: float32) {.inline.} = + ## Adds a circle to the current path. + ctx.path.circle(center, r) + +proc polygon*(ctx: Context, x, y, size: float32, sides: int) {.inline.} = + ## Adds an n-sided regular polygon at (x, y) of size to the current path. + ctx.path.polygon(x, y, size, sides) + +proc polygon*(ctx: Context, pos: Vec2, size: float32, sides: int) {.inline.} = + ## Adds an n-sided regular polygon at (x, y) of size to the current path. + ctx.path.polygon(pos, size, sides) + +proc fillRoundedRect*(ctx: Context, rect: Rect, nw, ne, se, sw: float32) = + ## Draws a rounded rectangle that is filled according to the current fillStyle. + var path: Path + path.roundedRect(rect, nw, ne, se, sw) + ctx.fill(path) + +proc fillRoundedRect*(ctx: Context, rect: Rect, radius: float32) {.inline.} = + ## Draws a rounded rectangle that is filled according to the current fillStyle. + ctx.fillRoundedRect(rect, radius, radius, radius, radius) + +proc strokeRoundedRect*(ctx: Context, rect: Rect, nw, ne, se, sw: float32) = + ## Draws a rounded rectangle that is stroked (outlined) according to the + ## current strokeStyle and other context settings. + var path: Path + path.roundedRect(rect, nw, ne, se, sw) + ctx.stroke(path) + +proc strokeRoundedRect*(ctx: Context, rect: Rect, radius: float32) {.inline.} = + ## Draws a rounded rectangle that is stroked (outlined) according to the + ## current strokeStyle and other context settings. + ctx.strokeRoundedRect(rect, radius, radius, radius, radius) + +proc strokeSegment*(ctx: Context, segment: Segment) = + ## Strokes a segment (draws a line from segment.at to segment.to) according + ## to the current strokeStyle and other context settings. + var path: Path + path.moveTo(segment.at) + path.lineTo(segment.to) + ctx.stroke(path) + +proc fillEllipse*(ctx: Context, center: Vec2, rx, ry: float32) = + ## Draws an ellipse that is filled according to the current fillStyle. + var path: Path + path.ellipse(center, rx, ry) + ctx.fill(path) + +proc strokeEllipse*(ctx: Context, center: Vec2, rx, ry: float32) = + ## Draws an ellipse that is stroked (outlined) according to the current + ## strokeStyle and other context settings. + var path: Path + path.ellipse(center, rx, ry) + ctx.stroke(path) + +proc fillCircle*(ctx: Context, center: Vec2, radius: float32) = + ## Draws a circle that is filled according to the current fillStyle. + var path: Path + path.ellipse(center, radius, radius) + ctx.fill(path) + +proc strokeCircle*(ctx: Context, center: Vec2, radius: float32) = + ## Draws a circle that is stroked (outlined) according to the current + ## strokeStyle and other context settings. + var path: Path + path.ellipse(center, radius, radius) + ctx.stroke(path) + +proc fillPolygon*(ctx: Context, pos: Vec2, size: float32, sides: int) = + ## Draws an n-sided regular polygon at (x, y) of size that is filled according + ## to the current fillStyle. + var path: Path + path.polygon(pos, size, sides) + ctx.fill(path) + +proc strokePolygon*(ctx: Context, pos: Vec2, size: float32, sides: int) = + ## Draws an n-sided regular polygon at (x, y) of size that is stroked + ## (outlined) according to the current strokeStyle and other context settings. + var path: Path + path.polygon(pos, size, sides) + ctx.stroke(path) diff --git a/src/pixie/paints.nim b/src/pixie/paints.nim index 59bf7c4..f3bc2a5 100644 --- a/src/pixie/paints.nim +++ b/src/pixie/paints.nim @@ -32,9 +32,9 @@ type converter parseSomePaint*(paint: SomePaint): Paint {.inline.} = ## Given SomePaint, parse it in different ways. when type(paint) is string: - Paint(kind: pkSolid, color: parseHtmlColor(paint).rgba()) + Paint(kind: pkSolid, color: parseHtmlColor(paint).rgbx()) elif type(paint) is SomeColor: - Paint(kind: pkSolid, color: paint.rgba()) + Paint(kind: pkSolid, color: paint.rgbx()) elif type(paint) is Paint: paint diff --git a/src/pixie/paths.nim b/src/pixie/paths.nim index 9865e77..9c53862 100644 --- a/src/pixie/paths.nim +++ b/src/pixie/paths.nim @@ -569,12 +569,16 @@ proc ellipse*(path: var Path, center: Vec2, rx, ry: float32) {.inline.} = ## Adds a ellipse. path.ellipse(center.x, center.y, rx, ry) +proc circle*(path: var Path, cx, cy, r: float32) {.inline.} = + ## Adds a circle. + path.ellipse(cx, cy, r, r) + proc circle*(path: var Path, center: Vec2, r: float32) {.inline.} = ## Adds a circle. path.ellipse(center.x, center.y, r, r) proc polygon*(path: var Path, x, y, size: float32, sides: int) = - ## Draws an n-sided regular polygon at (x, y) with the parameter size. + ## Adds an n-sided regular polygon at (x, y) with the parameter size. path.moveTo(x + size * cos(0.0), y + size * sin(0.0)) for side in 0 .. sides: path.lineTo( @@ -583,7 +587,7 @@ proc polygon*(path: var Path, x, y, size: float32, sides: int) = ) proc polygon*(path: var Path, pos: Vec2, size: float32, sides: int) {.inline.} = - ## Draws a n-sided regular polygon at (x, y) with the parameter size. + ## Adds a n-sided regular polygon at (x, y) with the parameter size. path.polygon(pos.x, pos.y, size, sides) proc commandsToShapes*(path: Path, pixelScale: float32 = 1.0): seq[seq[Vec2]] = diff --git a/tests/test_fonts.nim b/tests/test_fonts.nim index 4009eb6..cf69394 100644 --- a/tests/test_fonts.nim +++ b/tests/test_fonts.nim @@ -655,8 +655,10 @@ block: doDiff(image, "spans1") + let ctx = newContext(image) + ctx.fillStyle = rgba(128, 128, 128, 128) for i, rect in arrangement.selectionRects: - image.fillRect(rect, rgba(128, 128, 128, 128)) + ctx.fillRect(rect) doDiff(image, "selection_rects1") @@ -685,8 +687,10 @@ block: doDiff(image, "spans2") + let ctx = newContext(image) + ctx.fillStyle = rgba(128, 128, 128, 128) for i, rect in arrangement.selectionRects: - image.fillRect(rect, rgba(128, 128, 128, 128)) + ctx.fillRect(rect) doDiff(image, "selection_rects2") @@ -703,8 +707,10 @@ block: image.fillText(arrangement) + let ctx = newContext(image) + ctx.fillStyle = rgba(128, 128, 128, 128) for i, rect in arrangement.selectionRects: - image.fillRect(rect, rgba(128, 128, 128, 128)) + ctx.fillRect(rect) doDiff(image, "selection_rects3") diff --git a/tests/test_images.nim b/tests/test_images.nim index c731527..517d4d7 100644 --- a/tests/test_images.nim +++ b/tests/test_images.nim @@ -106,15 +106,17 @@ block: doAssert a[0, 0] == rgbx(44, 33, 22, 55) block: - let image = newImage(100, 100) - image.fill(rgba(0, 0, 0, 255)) - image.fillRect(rect(25, 25, 50, 50), rgba(255, 255, 255, 255)) - image.blur(20) - image.writeFile("tests/images/imageblur20.png") + let ctx = newContext(100, 100) + ctx.fillStyle = rgba(255, 255, 255, 255) + ctx.image.fill(rgba(0, 0, 0, 255)) + ctx.fillRect(rect(25, 25, 50, 50), ) + ctx.image.blur(20) + ctx.image.writeFile("tests/images/imageblur20.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 0, 0, 255)) - image.fillRect(rect(25, 25, 50, 50), rgba(255, 255, 255, 255)) - image.blur(20, rgba(0, 0, 0, 255)) - image.writeFile("tests/images/imageblur20oob.png") + let ctx = newContext(100, 100) + ctx.fillStyle = rgba(255, 255, 255, 255) + ctx.image.fill(rgba(0, 0, 0, 255)) + ctx.fillRect(rect(25, 25, 50, 50)) + ctx.image.blur(20, rgba(0, 0, 0, 255)) + ctx.image.writeFile("tests/images/imageblur20oob.png") diff --git a/tests/test_images_draw.nim b/tests/test_images_draw.nim index a6dc990..3435278 100644 --- a/tests/test_images_draw.nim +++ b/tests/test_images_draw.nim @@ -51,94 +51,69 @@ block: a.writeFile("tests/images/rotate360.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.fillRect(rect(vec2(10, 10), vec2(30, 30)), rgba(255, 255, 0, 255)) - image.writeFile("tests/images/drawRect.png") + let ctx = newContext(100, 100) + ctx.fillStyle = rgba(255, 255, 0, 255) + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.fillRect(rect(vec2(10, 10), vec2(30, 30))) + ctx.image.writeFile("tests/images/drawRect.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.strokeRect( - rect(vec2(10, 10), vec2(30, 30)), - rgba(255, 255, 0, 255), - strokeWidth = 10 - ) - image.writeFile("tests/images/strokeRect.png") + let ctx = newContext(100, 100) + ctx.strokeStyle = rgba(255, 255, 0, 255) + ctx.lineWidth = 10 + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.strokeRect(rect(vec2(10, 10), vec2(30, 30))) + ctx.image.writeFile("tests/images/strokeRect.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.fillRoundedRect( - rect(vec2(10, 10), vec2(30, 30)), - 10, - rgba(255, 255, 0, 255) - ) - image.writeFile("tests/images/drawRoundedRect.png") + let ctx = newContext(100, 100) + ctx.fillStyle = rgba(255, 255, 0, 255) + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.fillRoundedRect(rect(vec2(10, 10), vec2(30, 30)), 10) + ctx.image.writeFile("tests/images/drawRoundedRect.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.strokeRoundedRect( - rect(vec2(10, 10), vec2(30, 30)), - 10, - rgba(255, 255, 0, 255), - strokeWidth = 10 - ) - image.writeFile("tests/images/strokeRoundedRect.png") + let ctx = newContext(100, 100) + ctx.strokeStyle = rgba(255, 255, 0, 255) + ctx.lineWidth = 10 + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.strokeRoundedRect(rect(vec2(10, 10), vec2(30, 30)), 10) + ctx.image.writeFile("tests/images/strokeRoundedRect.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.strokeSegment( - segment(vec2(10, 10), vec2(90, 90)), - rgba(255, 255, 0, 255), - strokeWidth = 10 - ) - image.writeFile("tests/images/drawSegment.png") + let ctx = newContext(100, 100) + ctx.strokeStyle = rgba(255, 255, 0, 255) + ctx.lineWidth = 10 + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.strokeSegment(segment(vec2(10, 10), vec2(90, 90))) + ctx.image.writeFile("tests/images/drawSegment.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.fillEllipse( - vec2(50, 50), - 25, - 25, - rgba(255, 255, 0, 255) - ) - image.writeFile("tests/images/drawEllipse.png") + let ctx = newContext(100, 100) + ctx.fillStyle = rgba(255, 255, 0, 255) + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.fillEllipse(vec2(50, 50), 25, 25) + ctx.image.writeFile("tests/images/drawEllipse.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.strokeEllipse( - vec2(50, 50), - 25, - 25, - rgba(255, 255, 0, 255), - strokeWidth = 10 - ) - image.writeFile("tests/images/strokeEllipse.png") + let ctx = newContext(100, 100) + ctx.strokeStyle = rgba(255, 255, 0, 255) + ctx.lineWidth = 10 + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.strokeEllipse(vec2(50, 50), 25, 25) + ctx.image.writeFile("tests/images/strokeEllipse.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.fillPolygon( - vec2(50, 50), - 30, - 6, - rgba(255, 255, 0, 255) - ) - image.writeFile("tests/images/drawPolygon.png") + let ctx = newContext(100, 100) + ctx.fillStyle = rgba(255, 255, 0, 255) + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.fillPolygon(vec2(50, 50), 30, 6) + ctx.image.writeFile("tests/images/drawPolygon.png") block: - let image = newImage(100, 100) - image.fill(rgba(0, 255, 255, 255)) - image.strokePolygon( - vec2(50, 50), - 30, - 6, - rgba(255, 255, 0, 255), - strokeWidth = 10 - ) - image.writeFile("tests/images/strokePolygon.png") + let ctx = newContext(100, 100) + ctx.strokeStyle = rgba(255, 255, 0, 255) + ctx.lineWidth = 10 + ctx.image.fill(rgba(0, 255, 255, 255)) + ctx.strokePolygon(vec2(50, 50), 30, 6) + ctx.image.writeFile("tests/images/strokePolygon.png")