vector: add StrokeLine, FillRect, and StrokeRect

Updates #2387

ebitenutil/shapes.go

@@ -35,30 +35,19 @@ func init() {
 // DrawLine draws a line segment on the given destination dst.
 //
 // DrawLine is intended to be used mainly for debugging or prototyping purpose.
+//
+// Deprecated: as of v2.5. Use vector.StrokeLine instead.
 func DrawLine(dst *ebiten.Image, x1, y1, x2, y2 float64, clr color.Color) {
-	length := math.Hypot(x2-x1, y2-y1)
+	vector.StrokeLine(dst, float32(x1), float32(y1), float32(x2), float32(y2), 1, clr)
-
-	op := &ebiten.DrawImageOptions{}
-	op.GeoM.Scale(length, 1)
-	op.GeoM.Rotate(math.Atan2(y2-y1, x2-x1))
-	op.GeoM.Translate(x1, y1)
-	op.ColorM.ScaleWithColor(clr)
-	// Filter must be 'nearest' filter (default).
-	// Linear filtering would make edges blurred.
-	dst.DrawImage(whiteSubImage, op)
 }
 
 // DrawRect draws a rectangle on the given destination dst.
 //
 // DrawRect is intended to be used mainly for debugging or prototyping purpose.
+//
+// Deprecated: as of v2.5. Use vector.FillRect instead.
 func DrawRect(dst *ebiten.Image, x, y, width, height float64, clr color.Color) {
-	op := &ebiten.DrawImageOptions{}
+	vector.FillRect(dst, float32(x), float32(y), float32(width), float32(height), clr)
-	op.GeoM.Scale(width, height)
-	op.GeoM.Translate(x, y)
-	op.ColorM.ScaleWithColor(clr)
-	// Filter must be 'nearest' filter (default).
-	// Linear filtering would make edges blurred.
-	dst.DrawImage(whiteSubImage, op)
 }
 
 // DrawCircle draws a circle on given destination dst.

examples/audio/main.go

@@ -39,6 +39,7 @@ import (
 	raudio "github.com/hajimehoshi/ebiten/v2/examples/resources/audio"
 	riaudio "github.com/hajimehoshi/ebiten/v2/examples/resources/images/audio"
 	"github.com/hajimehoshi/ebiten/v2/inpututil"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 const (
@@ -338,7 +339,7 @@ func (p *Player) seekBarIfNeeded() error {
 func (p *Player) draw(screen *ebiten.Image) {
 	// Draw the bar.
 	x, y, w, h := playerBarRect()
-	ebitenutil.DrawRect(screen, float64(x), float64(y), float64(w), float64(h), playerBarColor)
+	vector.FillRect(screen, float32(x), float32(y), float32(w), float32(h), playerBarColor)
 
 	// Draw the cursor on the bar.
 	c := p.current

examples/blocks/blocks/gamescene.go

@@ -25,9 +25,9 @@ import (
 	"time"
 
 	"github.com/hajimehoshi/ebiten/v2"
-	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
 	"github.com/hajimehoshi/ebiten/v2/examples/resources/images"
 	"github.com/hajimehoshi/ebiten/v2/inpututil"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 var (
@@ -107,7 +107,7 @@ func init() {
 }
 
 func drawWindow(r *ebiten.Image, x, y, width, height int) {
-	ebitenutil.DrawRect(r, float64(x), float64(y), float64(width), float64(height), color.RGBA{0, 0, 0, 0xc0})
+	vector.FillRect(r, float32(x), float32(y), float32(width), float32(height), color.RGBA{0, 0, 0, 0xc0})
 }
 
 var fontColor = color.NRGBA{0x40, 0x40, 0xff, 0xff}

examples/cursor/main.go

@@ -24,6 +24,7 @@ import (
 
 	"github.com/hajimehoshi/ebiten/v2"
 	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 const (
@@ -50,7 +51,7 @@ func (g *Game) Update() error {
 
 func (g *Game) Draw(screen *ebiten.Image) {
 	for r, c := range g.gridColors {
-		ebitenutil.DrawRect(screen, float64(r.Min.X), float64(r.Min.Y), float64(r.Dx()), float64(r.Dy()), c)
+		vector.FillRect(screen, float32(r.Min.X), float32(r.Min.Y), float32(r.Dx()), float32(r.Dy()), c)
 	}
 
 	switch ebiten.CursorShape() {

examples/piano/main.go

@@ -32,6 +32,7 @@ import (
 	"github.com/hajimehoshi/ebiten/v2/examples/resources/fonts"
 	"github.com/hajimehoshi/ebiten/v2/inpututil"
 	"github.com/hajimehoshi/ebiten/v2/text"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 var (
@@ -149,7 +150,7 @@ func init() {
 	for i, k := range whiteKeys {
 		x := i*keyWidth + 36
 		height := 112
-		ebitenutil.DrawRect(pianoImage, float64(x), float64(y), float64(keyWidth-1), float64(height), color.White)
+		vector.FillRect(pianoImage, float32(x), float32(y), float32(keyWidth-1), float32(height), color.White)
 		text.Draw(pianoImage, k, arcadeFont, x+8, y+height-8, color.Black)
 	}
 
@@ -160,7 +161,7 @@ func init() {
 		}
 		x := i*keyWidth + 24
 		height := 64
-		ebitenutil.DrawRect(pianoImage, float64(x), float64(y), float64(keyWidth-1), float64(height), color.Black)
+		vector.FillRect(pianoImage, float32(x), float32(y), float32(keyWidth-1), float32(height), color.Black)
 		text.Draw(pianoImage, k, arcadeFont, x+8, y+height-8, color.White)
 	}
 }

examples/raycasting/main.go

@@ -32,6 +32,7 @@ import (
 	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
 	"github.com/hajimehoshi/ebiten/v2/examples/resources/images"
 	"github.com/hajimehoshi/ebiten/v2/inpututil"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 const (
@@ -249,7 +250,7 @@ func (g *Game) Draw(screen *ebiten.Image) {
 	if g.showRays {
 		// Draw rays
 		for _, r := range rays {
-			ebitenutil.DrawLine(screen, r.X1, r.Y1, r.X2, r.Y2, color.RGBA{255, 255, 0, 150})
+			vector.StrokeLine(screen, float32(r.X1), float32(r.Y1), float32(r.X2), float32(r.Y2), 1, color.RGBA{255, 255, 0, 150})
 		}
 	}
 
@@ -261,13 +262,13 @@ func (g *Game) Draw(screen *ebiten.Image) {
 	// Draw walls
 	for _, obj := range g.objects {
 		for _, w := range obj.walls {
-			ebitenutil.DrawLine(screen, w.X1, w.Y1, w.X2, w.Y2, color.RGBA{255, 0, 0, 255})
+			vector.StrokeLine(screen, float32(w.X1), float32(w.Y1), float32(w.X2), float32(w.Y2), 1, color.RGBA{255, 0, 0, 255})
 		}
 	}
 
 	// Draw player as a rect
-	ebitenutil.DrawRect(screen, float64(g.px)-2, float64(g.py)-2, 4, 4, color.Black)
+	vector.FillRect(screen, float32(g.px)-2, float32(g.py)-2, 4, 4, color.Black)
-	ebitenutil.DrawRect(screen, float64(g.px)-1, float64(g.py)-1, 2, 2, color.RGBA{255, 100, 100, 255})
+	vector.FillRect(screen, float32(g.px)-1, float32(g.py)-1, 2, 2, color.RGBA{255, 100, 100, 255})
 
 	if g.showRays {
 		ebitenutil.DebugPrintAt(screen, "R: hide rays", padding, 0)

examples/shapes/main.go

@@ -19,13 +19,12 @@ package main
 
 import (
 	"fmt"
-	"image"
 	"image/color"
 	"log"
-	"math"
 
 	"github.com/hajimehoshi/ebiten/v2"
 	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 const (
@@ -33,129 +32,10 @@ const (
 	screenHeight = 480
 )
 
-var (
-	whiteImage = ebiten.NewImage(3, 3)
-)
-
-func init() {
-	whiteImage.Fill(color.White)
-}
-
 type Game struct {
 	count int
 }
 
-func line(x0, y0, x1, y1 float32, clr color.RGBA) ([]ebiten.Vertex, []uint16) {
-	const width = 1
-
-	theta := math.Atan2(float64(y1-y0), float64(x1-x0))
-	theta += math.Pi / 2
-	dx := float32(math.Cos(theta))
-	dy := float32(math.Sin(theta))
-
-	r := float32(clr.R) / 0xff
-	g := float32(clr.G) / 0xff
-	b := float32(clr.B) / 0xff
-	a := float32(clr.A) / 0xff
-
-	return []ebiten.Vertex{
-		{
-			DstX:   x0 - width*dx/2,
-			DstY:   y0 - width*dy/2,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-		{
-			DstX:   x0 + width*dx/2,
-			DstY:   y0 + width*dy/2,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-		{
-			DstX:   x1 - width*dx/2,
-			DstY:   y1 - width*dy/2,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-		{
-			DstX:   x1 + width*dx/2,
-			DstY:   y1 + width*dy/2,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-	}, []uint16{0, 1, 2, 1, 2, 3}
-}
-
-func rect(x, y, w, h float32, clr color.RGBA) ([]ebiten.Vertex, []uint16) {
-	r := float32(clr.R) / 0xff
-	g := float32(clr.G) / 0xff
-	b := float32(clr.B) / 0xff
-	a := float32(clr.A) / 0xff
-	x0 := x
-	y0 := y
-	x1 := x + w
-	y1 := y + h
-
-	return []ebiten.Vertex{
-		{
-			DstX:   x0,
-			DstY:   y0,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-		{
-			DstX:   x1,
-			DstY:   y0,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-		{
-			DstX:   x0,
-			DstY:   y1,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-		{
-			DstX:   x1,
-			DstY:   y1,
-			SrcX:   1,
-			SrcY:   1,
-			ColorR: r,
-			ColorG: g,
-			ColorB: b,
-			ColorA: a,
-		},
-	}, []uint16{0, 1, 2, 1, 2, 3}
-}
-
 func (g *Game) Update() error {
 	g.count++
 	g.count %= 240
@@ -163,20 +43,13 @@ func (g *Game) Update() error {
 }
 
 func (g *Game) Draw(screen *ebiten.Image) {
-	src := whiteImage.SubImage(image.Rect(1, 1, 2, 2)).(*ebiten.Image)
+	cf := float32(g.count)
+	vector.StrokeLine(screen, 100, 100, 300, 100, 1, color.RGBA{0xff, 0xff, 0xff, 0xff})
+	vector.StrokeLine(screen, 50, 150, 50, 350, 1, color.RGBA{0xff, 0xff, 0x00, 0xff})
+	vector.StrokeLine(screen, 50, 100+float32(cf), 200+float32(cf), 250, 4, color.RGBA{0x00, 0xff, 0xff, 0xff})
 
-	cf := float64(g.count)
+	vector.FillRect(screen, 50+float32(cf), 50+float32(cf), 100+float32(cf), 100+float32(cf), color.RGBA{0x80, 0x80, 0x80, 0xff})
-	v, i := line(100, 100, 300, 100, color.RGBA{0xff, 0xff, 0xff, 0xff})
+	vector.StrokeRect(screen, 300-float32(cf), 50, 120, 120, 10, color.RGBA{0x00, 0x80, 0x00, 0xff})
-	screen.DrawTriangles(v, i, src, nil)
-	v, i = line(50, 150, 50, 350, color.RGBA{0xff, 0xff, 0x00, 0xff})
-	screen.DrawTriangles(v, i, src, nil)
-	v, i = line(50, 100+float32(cf), 200+float32(cf), 250, color.RGBA{0x00, 0xff, 0xff, 0xff})
-	screen.DrawTriangles(v, i, src, nil)
-
-	v, i = rect(50+float32(cf), 50+float32(cf), 100+float32(cf), 100+float32(cf), color.RGBA{0x80, 0x80, 0x80, 0x80})
-	screen.DrawTriangles(v, i, src, nil)
-	v, i = rect(300-float32(cf), 50, 120, 120, color.RGBA{0x00, 0x80, 0x00, 0x80})
-	screen.DrawTriangles(v, i, src, nil)
 
 	ebitenutil.DebugPrint(screen, fmt.Sprintf("TPS: %0.2f", ebiten.ActualTPS()))
 }

examples/snake/main.go

@@ -27,6 +27,7 @@ import (
 	"github.com/hajimehoshi/ebiten/v2"
 	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
 	"github.com/hajimehoshi/ebiten/v2/inpututil"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 const (
@@ -174,9 +175,9 @@ func (g *Game) Update() error {
 
 func (g *Game) Draw(screen *ebiten.Image) {
 	for _, v := range g.snakeBody {
-		ebitenutil.DrawRect(screen, float64(v.X*gridSize), float64(v.Y*gridSize), gridSize, gridSize, color.RGBA{0x80, 0xa0, 0xc0, 0xff})
+		vector.FillRect(screen, float32(v.X*gridSize), float32(v.Y*gridSize), gridSize, gridSize, color.RGBA{0x80, 0xa0, 0xc0, 0xff})
 	}
-	ebitenutil.DrawRect(screen, float64(g.apple.X*gridSize), float64(g.apple.Y*gridSize), gridSize, gridSize, color.RGBA{0xFF, 0x00, 0x00, 0xff})
+	vector.FillRect(screen, float32(g.apple.X*gridSize), float32(g.apple.Y*gridSize), gridSize, gridSize, color.RGBA{0xFF, 0x00, 0x00, 0xff})
 
 	if g.moveDirection == dirNone {
 		ebitenutil.DebugPrint(screen, fmt.Sprintf("Press up/down/left/right to start"))

examples/stars/main.go

@@ -24,7 +24,7 @@ import (
 	"time"
 
 	"github.com/hajimehoshi/ebiten/v2"
-	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 const (
@@ -35,18 +35,18 @@ const (
 )
 
 type Star struct {
-	fromx, fromy, tox, toy, brightness float64
+	fromx, fromy, tox, toy, brightness float32
 }
 
 func (s *Star) Init() {
-	s.tox = rand.Float64() * screenWidth * scale
+	s.tox = rand.Float32() * screenWidth * scale
 	s.fromx = s.tox
-	s.toy = rand.Float64() * screenHeight * scale
+	s.toy = rand.Float32() * screenHeight * scale
 	s.fromy = s.toy
-	s.brightness = rand.Float64() * 0xff
+	s.brightness = rand.Float32() * 0xff
 }
 
-func (s *Star) Update(x, y float64) {
+func (s *Star) Update(x, y float32) {
 	s.fromx = s.tox
 	s.fromy = s.toy
 	s.tox += (s.tox - x) / 32
@@ -61,11 +61,12 @@ func (s *Star) Update(x, y float64) {
 }
 
 func (s *Star) Draw(screen *ebiten.Image) {
-	c := color.RGBA{R: uint8(0xbb * s.brightness / 0xff),
+	c := color.RGBA{
+		R: uint8(0xbb * s.brightness / 0xff),
 		G: uint8(0xdd * s.brightness / 0xff),
 		B: uint8(0xff * s.brightness / 0xff),
 		A: 0xff}
-	ebitenutil.DrawLine(screen, s.fromx/scale, s.fromy/scale, s.tox/scale, s.toy/scale, c)
+	vector.StrokeLine(screen, s.fromx/scale, s.fromy/scale, s.tox/scale, s.toy/scale, 1, c)
 }
 
 type Game struct {
@@ -83,7 +84,7 @@ func NewGame() *Game {
 func (g *Game) Update() error {
 	x, y := ebiten.CursorPosition()
 	for i := 0; i < starsCount; i++ {
-		g.stars[i].Update(float64(x*scale), float64(y*scale))
+		g.stars[i].Update(float32(x*scale), float32(y*scale))
 	}
 	return nil
 }

examples/text/main.go

@@ -28,9 +28,9 @@ import (
 	"golang.org/x/image/font/opentype"
 
 	"github.com/hajimehoshi/ebiten/v2"
-	"github.com/hajimehoshi/ebiten/v2/ebitenutil"
 	"github.com/hajimehoshi/ebiten/v2/examples/resources/fonts"
 	"github.com/hajimehoshi/ebiten/v2/text"
+	"github.com/hajimehoshi/ebiten/v2/vector"
 )
 
 const (
@@ -96,13 +96,13 @@ func (g *Game) Draw(screen *ebiten.Image) {
 	{
 		const x, y = 20, 40
 		b := text.BoundString(mplusNormalFont, sampleText)
-		ebitenutil.DrawRect(screen, float64(b.Min.X+x), float64(b.Min.Y+y), float64(b.Dx()), float64(b.Dy()), gray)
+		vector.FillRect(screen, float32(b.Min.X+x), float32(b.Min.Y+y), float32(b.Dx()), float32(b.Dy()), gray)
 		text.Draw(screen, sampleText, mplusNormalFont, x, y, color.White)
 	}
 	{
 		const x, y = 20, 140
 		b := text.BoundString(mplusBigFont, sampleText)
-		ebitenutil.DrawRect(screen, float64(b.Min.X+x), float64(b.Min.Y+y), float64(b.Dx()), float64(b.Dy()), gray)
+		vector.FillRect(screen, float32(b.Min.X+x), float32(b.Min.Y+y), float32(b.Dx()), float32(b.Dy()), gray)
 		text.Draw(screen, sampleText, mplusBigFont, x, y, color.White)
 	}
 	{
@@ -117,7 +117,7 @@ func (g *Game) Draw(screen *ebiten.Image) {
 		const x, y = 160, 240
 		const lineHeight = 80
 		b := text.BoundString(text.FaceWithLineHeight(mplusBigFont, lineHeight), sampleText)
-		ebitenutil.DrawRect(screen, float64(b.Min.X+x), float64(b.Min.Y+y), float64(b.Dx()), float64(b.Dy()), gray)
+		vector.FillRect(screen, float32(b.Min.X+x), float32(b.Min.Y+y), float32(b.Dx()), float32(b.Dy()), gray)
 		text.Draw(screen, sampleText, text.FaceWithLineHeight(mplusBigFont, lineHeight), x, y, color.White)
 	}
 	{

vector/path.go

@@ -387,7 +387,7 @@ func (p *Path) Close() {
 //
 // The returned vertice's SrcX and SrcY are 0, and ColorR, ColorG, ColorB, and ColorA are 1.
 //
-// The returned values are intended to be passed to DrawTriangles or DrawTrianglesShader with the EvenOdd fill mode
+// The returned values are intended to be passed to DrawTriangles or DrawTrianglesShader with the EvenOdd fill rule
 // in order to render a complex polygon like a concave polygon, a polygon with holes, or a self-intersecting polygon.
 //
 // The returned vertices and indices should be rendered with a solid (non-transparent) color with the default Blend (source-over).
@@ -471,7 +471,7 @@ type StrokeOptions struct {
 // The returned vertice's SrcX and SrcY are 0, and ColorR, ColorG, ColorB, and ColorA are 1.
 //
 // The returned values are intended to be passed to DrawTriangles or DrawTrianglesShader with a solid (non-transparent) color
-// with the FillAll fill mode (not the EvenOdd fill mode).
+// with the FillAll fill rule (not the EvenOdd fill rule).
 func (p *Path) AppendVerticesAndIndicesForStroke(vertices []ebiten.Vertex, indices []uint16, op *StrokeOptions) ([]ebiten.Vertex, []uint16) {
 	if op == nil {
 		return vertices, indices

vector/util.go

@@ -0,0 +1,101 @@
+// Copyright 2022 The Ebitengine Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package vector
+
+import (
+	"image"
+	"image/color"
+
+	"github.com/hajimehoshi/ebiten/v2"
+)
+
+var (
+	whiteImage    = ebiten.NewImage(3, 3)
+	whiteSubImage = whiteImage.SubImage(image.Rect(1, 1, 2, 2)).(*ebiten.Image)
+)
+
+func init() {
+	whiteImage.Fill(color.White)
+}
+
+func updateVerticesForUtil(vs []ebiten.Vertex, clr color.Color) {
+	r, g, b, a := clr.RGBA()
+	for i := range vs {
+		vs[i].SrcX = 1
+		vs[i].SrcY = 1
+		vs[i].ColorR = float32(r) / 0xffff
+		vs[i].ColorG = float32(g) / 0xffff
+		vs[i].ColorB = float32(b) / 0xffff
+		vs[i].ColorA = float32(a) / 0xffff
+	}
+}
+
+// StrokeLine strokes a line (x0, y0)-(x1, y1) with the specified width and color.
+func StrokeLine(dst *ebiten.Image, x0, y0, x1, y1 float32, strokeWidth float32, clr color.Color) {
+	var path Path
+	path.MoveTo(x0, y0)
+	path.LineTo(x1, y1)
+	strokeOp := &StrokeOptions{}
+	strokeOp.Width = strokeWidth
+	vs, is := path.AppendVerticesAndIndicesForStroke(nil, nil, strokeOp)
+
+	updateVerticesForUtil(vs, clr)
+
+	op := &ebiten.DrawTrianglesOptions{}
+	op.ColorScaleFormat = ebiten.ColorScaleFormatPremultipliedAlpha
+	op.AntiAlias = true
+	dst.DrawTriangles(vs, is, whiteSubImage, op)
+}
+
+// FillRect fills a rectangle with the specified width and color.
+func FillRect(dst *ebiten.Image, x, y, width, height float32, clr color.Color) {
+	var path Path
+	path.MoveTo(x, y)
+	path.LineTo(x, y+height)
+	path.LineTo(x+width, y+height)
+	path.LineTo(x+width, y)
+	vs, is := path.AppendVerticesAndIndicesForFilling(nil, nil)
+
+	updateVerticesForUtil(vs, clr)
+
+	op := &ebiten.DrawTrianglesOptions{}
+	op.ColorScaleFormat = ebiten.ColorScaleFormatPremultipliedAlpha
+	op.AntiAlias = true
+	dst.DrawTriangles(vs, is, whiteSubImage, op)
+}
+
+// StrokeRect strokes a rectangle with the specified width and color.
+//
+// clr has be to be a solid (non-transparent) color.
+func StrokeRect(dst *ebiten.Image, x, y, width, height float32, strokeWidth float32, clr color.Color) {
+	var path Path
+	path.MoveTo(x, y)
+	path.LineTo(x, y+height)
+	path.LineTo(x+width, y+height)
+	path.LineTo(x+width, y)
+	path.Close()
+
+	strokeOp := &StrokeOptions{}
+	strokeOp.Width = strokeWidth
+	strokeOp.MiterLimit = 10
+	vs, is := path.AppendVerticesAndIndicesForStroke(nil, nil, strokeOp)
+
+	updateVerticesForUtil(vs, clr)
+
+	op := &ebiten.DrawTrianglesOptions{}
+	op.ColorScaleFormat = ebiten.ColorScaleFormatPremultipliedAlpha
+	op.AntiAlias = true
+	dst.DrawTriangles(vs, is, whiteSubImage, op)
+}