rui_orig/canvas.go

package rui

import (
	"fmt"
	"strconv"
	"strings"
)

const (
	// MiterJoin - Connected segments are joined by extending their outside edges
	// to connect at a single point, with the effect of filling an additional
	// lozenge-shaped area. This setting is affected by the miterLimit property
	MiterJoin = 0
	// RoundJoin - rounds off the corners of a shape by filling an additional sector
	// of disc centered at the common endpoint of connected segments.
	// The radius for these rounded corners is equal to the line width.
	RoundJoin = 1
	// BevelJoin - Fills an additional triangular area between the common endpoint
	// of connected segments, and the separate outside rectangular corners of each segment.
	BevelJoin = 2

	// ButtCap - the ends of lines are squared off at the endpoints. Default value.
	ButtCap = 0
	// RoundCap - the ends of lines are rounded.
	RoundCap = 1
	// SquareCap - the ends of lines are squared off by adding a box with an equal width
	// and half the height of the line's thickness.
	SquareCap = 2

	// AlphabeticBaseline - the text baseline is the normal alphabetic baseline. Default value.
	AlphabeticBaseline = 0
	// TopBaseline - the text baseline is the top of the em square.
	TopBaseline = 1
	// MiddleBaseline - the text baseline is the middle of the em square.
	MiddleBaseline = 2
	// BottomBaseline - the text baseline is the bottom of the bounding box.
	// This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.
	BottomBaseline = 3
	// HangingBaseline - the text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)
	HangingBaseline = 4
	// IdeographicBaseline - the text baseline is the ideographic baseline; this is
	// the bottom of the body of the characters, if the main body of characters protrudes
	// beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)
	IdeographicBaseline = 5

	// StartAlign - the text is aligned at the normal start of the line (left-aligned
	// for left-to-right locales, right-aligned for right-to-left locales).
	StartAlign = 3
	// EndAlign - the text is aligned at the normal end of the line (right-aligned
	// for left-to-right locales, left-aligned for right-to-left locales).
	EndAlign = 4
)

// GradientPoint defined by an offset and a color, to a linear or radial gradient
type GradientPoint struct {
	// Offset - a number between 0 and 1, inclusive, representing the position of the color stop
	Offset float64
	// Color - the color of the stop
	Color Color
}

// FontParams defined optionally font properties
type FontParams struct {
	// Italic - if true then a font is italic
	Italic bool
	// SmallCaps - if true then a font uses small-caps glyphs
	SmallCaps bool
	// Weight - a font weight. Valid values: 0...9, there
	//   0 - a weight does not specify;
	//   1 - a minimal weight;
	//   4 - a normal weight;
	//   7 - a bold weight;
	//   9 - a maximal weight.
	Weight int
	// LineHeight - the height (relative to the font size of the element itself) of a line box.
	LineHeight SizeUnit
}

// Canvas is a drawing interface
type Canvas interface {
	// View return the view for the drawing
	View() CanvasView
	// Width returns the width in pixels of the canvas area
	Width() float64
	// Height returns the height in pixels of the canvas area
	Height() float64

	// Save saves the entire state of the canvas by pushing the current state onto a stack.
	Save()
	// Restore restores the most recently saved canvas state by popping the top entry
	// in the drawing state stack. If there is no saved state, this method does nothing.
	Restore()

	// ClipPath turns the rectangle into the current clipping region. It replaces any previous clipping region.
	ClipRect(x, y, width, height float64)
	// ClipPath turns the path into the current clipping region. It replaces any previous clipping region.
	ClipPath(path Path)

	// SetScale adds a scaling transformation to the canvas units horizontally and/or vertically.
	//   x - scaling factor in the horizontal direction. A negative value flips pixels across
	//       the vertical axis. A value of 1 results in no horizontal scaling;
	//   y - scaling factor in the vertical direction. A negative value flips pixels across
	//       the horizontal axis. A value of 1 results in no vertical scaling.
	SetScale(x, y float64)

	// SetTranslation adds a translation transformation to the current matrix.
	//   x - distance to move in the horizontal direction. Positive values are to the right, and negative to the left;
	//   y - distance to move in the vertical direction. Positive values are down, and negative are up.
	SetTranslation(x, y float64)

	// SetRotation adds a rotation to the transformation matrix.
	//   angle - the rotation angle, clockwise in radians
	SetRotation(angle float64)

	// SetTransformation multiplies the current transformation with the matrix described by the arguments
	// of this method. This lets you scale, rotate, translate (move), and skew the context.
	// The transformation matrix is described by:
	// ⎡ xScale xSkew  dx ⎤
	// ⎢ ySkew  yScale dy ⎥
	// ⎣   0      0     1 ⎦
	//   xScale, yScale - horizontal and vertical scaling. A value of 1 results in no scaling;
	//   xSkew, ySkew - horizontal and vertical skewing;
	//   dx, dy - horizontal and vertical translation (moving).
	SetTransformation(xScale, yScale, xSkew, ySkew, dx, dy float64)

	// ResetTransformation resets the current transform to the identity matrix
	ResetTransformation()

	// SetSolidColorFillStyle sets the color to use inside shapes
	SetSolidColorFillStyle(color Color)

	// SetSolidColorStrokeStyle sets color to use for the strokes (outlines) around shapes
	SetSolidColorStrokeStyle(color Color)

	// SetLinearGradientFillStyle sets a gradient along the line connecting two given coordinates to use inside shapes
	//   x0, y0 - coordinates of the start point;
	//   x1, y1 - coordinates of the end point;
	//   startColor, endColor - the start and end color
	//   stopPoints - the array of stop points
	SetLinearGradientFillStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint)

	// SetLinearGradientStrokeStyle sets a gradient along the line connecting two given coordinates to use for the strokes (outlines) around shapes
	//   x0, y0 - coordinates of the start point;
	//   x1, y1 - coordinates of the end point;
	//   color0, color1 - the start and end color
	//   stopPoints - the array of stop points
	SetLinearGradientStrokeStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint)

	// SetRadialGradientFillStyle sets a radial gradient using the size and coordinates of two circles
	// to use inside shapes
	//   x0, y0 - coordinates of the center of the start circle;
	//   r0 - the radius of the start circle;
	//   x1, y1 - coordinates the center of the end circle;
	//   r1 - the radius of the end circle;
	//   color0, color1 - the start and end color
	//   stopPoints - the array of stop points
	SetRadialGradientFillStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint)

	// SetRadialGradientStrokeStyle sets a radial gradient using the size and coordinates of two circles
	// to use for the strokes (outlines) around shapes
	//   x0, y0 - coordinates of the center of the start circle;
	//   r0 - the radius of the start circle;
	//   x1, y1 - coordinates the center of the end circle;
	//   r1 - the radius of the end circle;
	//   color0, color1 - the start and end color
	//   stopPoints - the array of stop points
	SetRadialGradientStrokeStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint)

	// SetImageFillStyle set the image as the filling pattern.
	//   repeate - indicating how to repeat the pattern's image. Possible values are:
	//     NoRepeat (0) - neither direction,
	//     RepeatXY (1) - both directions,
	//     RepeatX (2) - horizontal only,
	//     RepeatY (3) - vertical only.
	SetImageFillStyle(image Image, repeat int)

	// SetLineWidth the line width, in coordinate space units. Zero, negative, Infinity, and NaN values are ignored.
	SetLineWidth(width float64)

	// SetLineJoin sets the shape used to join two line segments where they meet.
	// Valid values: MiterJoin (0), RoundJoin (1), BevelJoin (2). All other values are ignored.
	SetLineJoin(join int)

	// SetLineJoin sets the shape used to draw the end points of lines.
	// Valid values: ButtCap (0), RoundCap (1), SquareCap (2). All other values are ignored.
	SetLineCap(cap int)

	// SetLineDash sets the line dash pattern used when stroking lines.
	// dash - an array of values that specify alternating lengths of lines and gaps which describe the pattern.
	// offset - the line dash offset
	SetLineDash(dash []float64, offset float64)

	// SetFont sets the current text style to use when drawing text
	SetFont(name string, size SizeUnit)
	// SetFontWithParams sets the current text style to use when drawing text
	SetFontWithParams(name string, size SizeUnit, params FontParams)

	// TextWidth calculates the width of the text drawn by a given font
	TextWidth(text string, fontName string, fontSize SizeUnit) float64

	// SetTextBaseline sets the current text baseline used when drawing text. Valid values:
	// AlphabeticBaseline (0), TopBaseline (1), MiddleBaseline (2), BottomBaseline (3),
	// HangingBaseline (4), and IdeographicBaseline (5). All other values are ignored.
	SetTextBaseline(baseline int)

	// SetTextAlign sets the current text alignment used when drawing text. Valid values:
	// LeftAlign (0), RightAlign (1), CenterAlign (2), StartAlign (3), and EndAlign(4). All other values are ignored.
	SetTextAlign(align int)

	// SetShadow sets shadow parameters:
	//   offsetX, offsetY - the distance that shadows will be offset horizontally and vertically;
	//   blur - the amount of blur applied to shadows. Must be non-negative;
	//   color - the color of shadows.
	SetShadow(offsetX, offsetY, blur float64, color Color)
	// ResetShadow sets shadow parameters to default values (invisible shadow)
	ResetShadow()

	// ClearRect erases the pixels in a rectangular area by setting them to transparent black
	ClearRect(x, y, width, height float64)
	// FillRect draws a rectangle that is filled according to the current FillStyle.
	FillRect(x, y, width, height float64)
	// StrokeRect draws a rectangle that is stroked (outlined) according to the current strokeStyle
	// and other context settings
	StrokeRect(x, y, width, height float64)
	// FillAndStrokeRect draws a rectangle that is filled according to the current FillStyle and
	// is stroked (outlined) according to the current strokeStyle and other context settings
	FillAndStrokeRect(x, y, width, height float64)

	// FillRoundedRect draws a rounded rectangle that is filled according to the current FillStyle.
	FillRoundedRect(x, y, width, height, r float64)
	// StrokeRoundedRect draws a rounded rectangle that is stroked (outlined) according
	// to the current strokeStyle and other context settings
	StrokeRoundedRect(x, y, width, height, r float64)
	// FillAndStrokeRoundedRect draws a rounded rectangle that is filled according to the current FillStyle
	// and is stroked (outlined) according to the current strokeStyle and other context settings
	FillAndStrokeRoundedRect(x, y, width, height, r float64)

	// FillEllipse draws a ellipse that is filled according to the current FillStyle.
	//   x, y - coordinates of the ellipse's center;
	//   radiusX - the ellipse's major-axis radius. Must be non-negative;
	//   radiusY - the ellipse's minor-axis radius. Must be non-negative;
	//   rotation - the rotation of the ellipse, expressed in radians.
	FillEllipse(x, y, radiusX, radiusY, rotation float64)
	// StrokeRoundedRect draws a ellipse that is stroked (outlined) according
	// to the current strokeStyle and other context settings
	StrokeEllipse(x, y, radiusX, radiusY, rotation float64)
	// FillAndStrokeEllipse draws a ellipse that is filled according to the current FillStyle
	// and is stroked (outlined) according to the current strokeStyle and other context settings
	FillAndStrokeEllipse(x, y, radiusX, radiusY, rotation float64)

	// FillPath draws a path that is filled according to the current FillStyle.
	FillPath(path Path)
	// StrokePath draws a path that is stroked (outlined) according to the current strokeStyle
	// and other context settings
	StrokePath(path Path)
	// FillAndStrokeRect draws a path that is filled according to the current FillStyle and
	// is stroked (outlined) according to the current strokeStyle and other context settings
	FillAndStrokePath(path Path)

	// DrawLine draws a line according to the current strokeStyle and other context settings
	DrawLine(x0, y0, x1, y1 float64)

	// FillText draws a text string at the specified coordinates, filling the string's characters
	// with the current FillStyle
	FillText(x, y float64, text string)
	// StrokeText strokes — that is, draws the outlines of — the characters of a text string
	// at the specified coordinates
	StrokeText(x, y float64, text string)

	// DrawImage draws the image at the (x, y) position
	DrawImage(x, y float64, image Image)
	// DrawImageInRect draws the image in the rectangle (x, y, width, height), scaling in height and width if necessary
	DrawImageInRect(x, y, width, height float64, image Image)
	// DrawImageFragment draws the frament (described by srcX, srcY, srcWidth, srcHeight) of image
	// in the rectangle (dstX, dstY, dstWidth, dstHeight), scaling in height and width if necessary
	DrawImageFragment(srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight float64, image Image)

	finishDraw() string
}

type canvasData struct {
	view   CanvasView
	script strings.Builder
}

func newCanvas(view CanvasView) Canvas {
	canvas := new(canvasData)
	canvas.view = view
	canvas.script.Grow(4096)
	canvas.script.WriteString(`const canvas = document.getElementById('`)
	canvas.script.WriteString(view.htmlID())
	canvas.script.WriteString(`');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
var gradient;
var path;
var img;
ctx.canvas.width = dpr * canvas.clientWidth;
ctx.canvas.height = dpr * canvas.clientHeight;
ctx.scale(dpr, dpr);`)
	/*
	   	canvas.script.WriteString(strconv.FormatFloat(view.canvasWidth(), 'g', -1, 64))
	   	canvas.script.WriteString(`;
	   ctx.canvas.height = dpr * `)
	   	canvas.script.WriteString(strconv.FormatFloat(view.canvasHeight(), 'g', -1, 64))
	   	canvas.script.WriteString(";\nctx.scale(dpr, dpr);")
	*/
	return canvas
}

func (canvas *canvasData) finishDraw() string {
	canvas.script.WriteString("\n")
	return canvas.script.String()
}

func (canvas *canvasData) View() CanvasView {
	return canvas.view
}

func (canvas *canvasData) Width() float64 {
	if canvas.view != nil {
		return canvas.view.Frame().Width
	}
	return 0
}

func (canvas *canvasData) Height() float64 {
	if canvas.view != nil {
		return canvas.view.Frame().Height
	}
	return 0
}

func (canvas *canvasData) Save() {
	canvas.script.WriteString("\nctx.save();")
}

func (canvas *canvasData) Restore() {
	canvas.script.WriteString("\nctx.restore();")
}

func (canvas *canvasData) ClipRect(x, y, width, height float64) {
	canvas.script.WriteString("\nctx.beginPath();\nctx.rect(")
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(width, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(height, 'g', -1, 64))
	canvas.script.WriteString(");\nctx.clip();")
}

func (canvas *canvasData) ClipPath(path Path) {
	canvas.script.WriteString(path.scriptText())
	canvas.script.WriteString("\nctx.clip();")
}

func (canvas *canvasData) SetScale(x, y float64) {
	canvas.script.WriteString("\nctx.scale(")
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y, 'g', -1, 64))
	canvas.script.WriteString(");")
}

func (canvas *canvasData) SetTranslation(x, y float64) {
	canvas.script.WriteString("\nctx.translate(")
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y, 'g', -1, 64))
	canvas.script.WriteString(");")
}

func (canvas *canvasData) SetRotation(angle float64) {
	canvas.script.WriteString("\nctx.rotate(")
	canvas.script.WriteString(strconv.FormatFloat(angle, 'g', -1, 64))
	canvas.script.WriteString(");")
}

func (canvas *canvasData) SetTransformation(xScale, yScale, xSkew, ySkew, dx, dy float64) {
	canvas.script.WriteString("\nctx.transform(")
	canvas.script.WriteString(strconv.FormatFloat(xScale, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(ySkew, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(xSkew, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(yScale, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(dx, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(dy, 'g', -1, 64))
	canvas.script.WriteString(");")
}

func (canvas *canvasData) ResetTransformation() {
	canvas.script.WriteString("\nctx.resetTransform();\nctx.scale(dpr, dpr);")
}

func (canvas *canvasData) SetSolidColorFillStyle(color Color) {
	canvas.script.WriteString("\nctx.fillStyle = \"")
	canvas.script.WriteString(color.cssString())
	canvas.script.WriteString(`";`)
}

func (canvas *canvasData) SetSolidColorStrokeStyle(color Color) {
	canvas.script.WriteString("\nctx.strokeStyle = \"")
	canvas.script.WriteString(color.cssString())
	canvas.script.WriteString(`";`)
}

func (canvas *canvasData) setLinearGradient(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint) {
	canvas.script.WriteString("\ngradient = ctx.createLinearGradient(")
	canvas.script.WriteString(strconv.FormatFloat(x0, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y0, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(x1, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y1, 'g', -1, 64))
	canvas.script.WriteString(");\ngradient.addColorStop(0, '")
	canvas.script.WriteString(color0.cssString())
	canvas.script.WriteString("');")

	for _, point := range stopPoints {
		if point.Offset >= 0 && point.Offset <= 1 {
			canvas.script.WriteString("\ngradient.addColorStop(")
			canvas.script.WriteString(strconv.FormatFloat(point.Offset, 'g', -1, 64))
			canvas.script.WriteString(", '")
			canvas.script.WriteString(point.Color.cssString())
			canvas.script.WriteString("');")
		}
	}

	canvas.script.WriteString("\ngradient.addColorStop(1, '")
	canvas.script.WriteString(color1.cssString())
	canvas.script.WriteString("');")
}

func (canvas *canvasData) SetLinearGradientFillStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint) {
	canvas.setLinearGradient(x0, y0, color0, x1, y1, color1, stopPoints)
	canvas.script.WriteString("\nctx.fillStyle = gradient;")
}

func (canvas *canvasData) SetLinearGradientStrokeStyle(x0, y0 float64, color0 Color, x1, y1 float64, color1 Color, stopPoints []GradientPoint) {
	canvas.setLinearGradient(x0, y0, color0, x1, y1, color1, stopPoints)
	canvas.script.WriteString("\nctx.strokeStyle = gradient;")
}

func (canvas *canvasData) setRadialGradient(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint) {
	canvas.script.WriteString("\ngradient = ctx.createRadialGradient(")
	canvas.script.WriteString(strconv.FormatFloat(x0, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y0, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(r0, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(x1, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y1, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(r1, 'g', -1, 64))
	canvas.script.WriteString(");\ngradient.addColorStop(0, '")
	canvas.script.WriteString(color0.cssString())
	canvas.script.WriteString("');")

	for _, point := range stopPoints {
		if point.Offset >= 0 && point.Offset <= 1 {
			canvas.script.WriteString("\ngradient.addColorStop(")
			canvas.script.WriteString(strconv.FormatFloat(point.Offset, 'g', -1, 64))
			canvas.script.WriteString(", '")
			canvas.script.WriteString(point.Color.cssString())
			canvas.script.WriteString("');")
		}
	}

	canvas.script.WriteString("\ngradient.addColorStop(1, '")
	canvas.script.WriteString(color1.cssString())
	canvas.script.WriteString("');")
}

func (canvas *canvasData) SetRadialGradientFillStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint) {
	canvas.setRadialGradient(x0, y0, r0, color0, x1, y1, r1, color1, stopPoints)
	canvas.script.WriteString("\nctx.fillStyle = gradient;")
}

func (canvas *canvasData) SetRadialGradientStrokeStyle(x0, y0, r0 float64, color0 Color, x1, y1, r1 float64, color1 Color, stopPoints []GradientPoint) {
	canvas.setRadialGradient(x0, y0, r0, color0, x1, y1, r1, color1, stopPoints)
	canvas.script.WriteString("\nctx.strokeStyle = gradient;")
}

func (canvas *canvasData) SetImageFillStyle(image Image, repeat int) {
	if image == nil || image.LoadingStatus() != ImageReady {
		return
	}

	var repeatText string
	switch repeat {
	case NoRepeat:
		repeatText = "no-repeat"

	case RepeatXY:
		repeatText = "repeat"

	case RepeatX:
		repeatText = "repeat-x"

	case RepeatY:
		repeatText = "repeat-y"

	default:
		return
	}

	canvas.script.WriteString("\nimg = images.get('")
	canvas.script.WriteString(image.URL())
	canvas.script.WriteString("');\nif (img) {\nctx.fillStyle = ctx.createPattern(img,'")
	canvas.script.WriteString(repeatText)
	canvas.script.WriteString("');\n}")
}

func (canvas *canvasData) SetLineWidth(width float64) {
	if width > 0 {
		canvas.script.WriteString("\nctx.lineWidth = '")
		canvas.script.WriteString(strconv.FormatFloat(width, 'g', -1, 64))
		canvas.script.WriteString("';")
	}
}

func (canvas *canvasData) SetLineJoin(join int) {
	switch join {
	case MiterJoin:
		canvas.script.WriteString("\nctx.lineJoin = 'miter';")

	case RoundJoin:
		canvas.script.WriteString("\nctx.lineJoin = 'round';")

	case BevelJoin:
		canvas.script.WriteString("\nctx.lineJoin = 'bevel';")
	}
}

func (canvas *canvasData) SetLineCap(cap int) {
	switch cap {
	case ButtCap:
		canvas.script.WriteString("\nctx.lineCap = 'butt';")

	case RoundCap:
		canvas.script.WriteString("\nctx.lineCap = 'round';")

	case SquareCap:
		canvas.script.WriteString("\nctx.lineCap = 'square';")
	}
}

func (canvas *canvasData) SetLineDash(dash []float64, offset float64) {
	canvas.script.WriteString("\nctx.setLineDash([")
	for i, d := range dash {
		if i > 0 {
			canvas.script.WriteString(",")
		}
		canvas.script.WriteString(strconv.FormatFloat(d, 'g', -1, 64))
	}

	canvas.script.WriteString("]);")
	if offset >= 0 {
		canvas.script.WriteString("\nctx.lineDashOffset = '")
		canvas.script.WriteString(strconv.FormatFloat(offset, 'g', -1, 64))
		canvas.script.WriteString("';")
	}
}

func (canvas *canvasData) writeFont(name string, script *strings.Builder) {
	names := strings.Split(name, ",")
	lead := " "
	for _, font := range names {
		font = strings.Trim(font, " \n\"'")
		script.WriteString(lead)
		lead = ","
		if strings.Contains(font, " ") {
			script.WriteRune('"')
			script.WriteString(font)
			script.WriteRune('"')
		} else {
			script.WriteString(font)
		}

	}
	script.WriteString("';")
}

func (canvas *canvasData) SetFont(name string, size SizeUnit) {
	canvas.script.WriteString("\nctx.font = '")
	canvas.script.WriteString(size.cssString("1em"))
	canvas.writeFont(name, &canvas.script)
}

func (canvas *canvasData) setFontWithParams(name string, size SizeUnit, params FontParams, script *strings.Builder) {
	script.WriteString("\nctx.font = '")
	if params.Italic {
		script.WriteString("italic ")
	}
	if params.SmallCaps {
		script.WriteString("small-caps ")
	}
	if params.Weight > 0 && params.Weight <= 9 {
		switch params.Weight {
		case 4:
			script.WriteString("normal ")
		case 7:
			script.WriteString("bold ")
		default:
			script.WriteString(strconv.Itoa(params.Weight * 100))
			script.WriteRune(' ')
		}
	}

	script.WriteString(size.cssString("1em"))
	switch params.LineHeight.Type {
	case Auto:

	case SizeInPercent:
		if params.LineHeight.Value != 100 {
			script.WriteString("/")
			script.WriteString(strconv.FormatFloat(params.LineHeight.Value/100, 'g', -1, 64))
		}

	case SizeInFraction:
		if params.LineHeight.Value != 1 {
			script.WriteString("/")
			script.WriteString(strconv.FormatFloat(params.LineHeight.Value, 'g', -1, 64))
		}

	default:
		script.WriteString("/")
		script.WriteString(params.LineHeight.cssString(""))
	}

	canvas.writeFont(name, script)
}

func (canvas *canvasData) SetFontWithParams(name string, size SizeUnit, params FontParams) {
	canvas.setFontWithParams(name, size, params, &canvas.script)
}

func (canvas *canvasData) TextWidth(text string, fontName string, fontSize SizeUnit) float64 {
	buffer := allocStringBuilder()
	defer freeStringBuilder(buffer)

	canvas.setFontWithParams(fontName, fontSize, FontParams{}, buffer)
	fontParams := buffer.String()

	buffer.Reset()
	canvas.writeStringArgs(text, buffer)
	str := buffer.String()

	script := fmt.Sprintf(`
var w = 0;	
const canvas = document.getElementById('%s');
if (canvas) {
  const ctx = canvas.getContext('2d');
  if (ctx) {
    ctx.save()
    const dpr = window.devicePixelRatio || 1;
    ctx.scale(dpr, dpr);
    %s;
    w = ctx.measureText('%s').width;
	ctx.restore();
  }
}
sendMessage('answer{width=' + w + ', answerID=' + answerID + '}');
`, canvas.View().htmlID(), fontParams, str)

	result := canvas.View().Session().runGetterScript(script)
	switch result.Tag() {
	case "answer":
		if value, ok := result.PropertyValue("width"); ok {
			w, err := strconv.ParseFloat(value, 32)
			if err == nil {
				return w
			}
			ErrorLog(err.Error())
		}

	case "error":
		if text, ok := result.PropertyValue("errorText"); ok {
			ErrorLog(text)
		} else {
			ErrorLog("error")
		}

	default:
		ErrorLog("Unknown answer: " + result.Tag())
	}

	return 0
}

func (canvas *canvasData) SetTextBaseline(baseline int) {
	switch baseline {
	case AlphabeticBaseline:
		canvas.script.WriteString("\nctx.textBaseline = 'alphabetic';")
	case TopBaseline:
		canvas.script.WriteString("\nctx.textBaseline = 'top';")
	case MiddleBaseline:
		canvas.script.WriteString("\nctx.textBaseline = 'middle';")
	case BottomBaseline:
		canvas.script.WriteString("\nctx.textBaseline = 'bottom';")
	case HangingBaseline:
		canvas.script.WriteString("\nctx.textBaseline = 'hanging';")
	case IdeographicBaseline:
		canvas.script.WriteString("\nctx.textBaseline = 'ideographic';")
	}
}

func (canvas *canvasData) SetTextAlign(align int) {
	switch align {
	case LeftAlign:
		canvas.script.WriteString("\nctx.textAlign = 'left';")
	case RightAlign:
		canvas.script.WriteString("\nctx.textAlign = 'right';")
	case CenterAlign:
		canvas.script.WriteString("\nctx.textAlign = 'center';")
	case StartAlign:
		canvas.script.WriteString("\nctx.textAlign = 'start';")
	case EndAlign:
		canvas.script.WriteString("\nctx.textAlign = 'end';")
	}
}

func (canvas *canvasData) SetShadow(offsetX, offsetY, blur float64, color Color) {
	if color.Alpha() > 0 && blur >= 0 {
		canvas.script.WriteString("\nctx.shadowColor = '")
		canvas.script.WriteString(color.cssString())
		canvas.script.WriteString("';\nctx.shadowOffsetX = ")
		canvas.script.WriteString(strconv.FormatFloat(offsetX, 'g', -1, 64))
		canvas.script.WriteString(";\nctx.shadowOffsetY = ")
		canvas.script.WriteString(strconv.FormatFloat(offsetY, 'g', -1, 64))
		canvas.script.WriteString(";\nctx.shadowBlur = ")
		canvas.script.WriteString(strconv.FormatFloat(blur, 'g', -1, 64))
		canvas.script.WriteString(";")
	}
}

func (canvas *canvasData) ResetShadow() {
	canvas.script.WriteString("\nctx.shadowColor = 'rgba(0,0,0,0)';\nctx.shadowOffsetX = 0;\nctx.shadowOffsetY = 0;\nctx.shadowBlur = 0;")
}

func (canvas *canvasData) writeRectArgs(x, y, width, height float64) {
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(width, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(height, 'g', -1, 64))
}

func (canvas *canvasData) ClearRect(x, y, width, height float64) {
	canvas.script.WriteString("\nctx.clearRect(")
	canvas.writeRectArgs(x, y, width, height)
	canvas.script.WriteString(");")
}

func (canvas *canvasData) FillRect(x, y, width, height float64) {
	canvas.script.WriteString("\nctx.fillRect(")
	canvas.writeRectArgs(x, y, width, height)
	canvas.script.WriteString(");")
}

func (canvas *canvasData) StrokeRect(x, y, width, height float64) {
	canvas.script.WriteString("\nctx.strokeRect(")
	canvas.writeRectArgs(x, y, width, height)
	canvas.script.WriteString(");")
}

func (canvas *canvasData) FillAndStrokeRect(x, y, width, height float64) {
	canvas.FillRect(x, y, width, height)
	canvas.StrokeRect(x, y, width, height)
}

func (canvas *canvasData) writeRoundedRect(x, y, width, height, r float64) {
	left := strconv.FormatFloat(x, 'g', -1, 64)
	top := strconv.FormatFloat(y, 'g', -1, 64)
	right := strconv.FormatFloat(x+width, 'g', -1, 64)
	bottom := strconv.FormatFloat(y+height, 'g', -1, 64)
	leftR := strconv.FormatFloat(x+r, 'g', -1, 64)
	topR := strconv.FormatFloat(y+r, 'g', -1, 64)
	rightR := strconv.FormatFloat(x+width-r, 'g', -1, 64)
	bottomR := strconv.FormatFloat(y+height-r, 'g', -1, 64)
	radius := strconv.FormatFloat(r, 'g', -1, 64)
	canvas.script.WriteString("\nctx.beginPath();\nctx.moveTo(")
	canvas.script.WriteString(left)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(topR)
	canvas.script.WriteString(");\nctx.arc(")
	canvas.script.WriteString(leftR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(topR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(radius)
	canvas.script.WriteString(",Math.PI,Math.PI*3/2);\nctx.lineTo(")
	canvas.script.WriteString(rightR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(top)
	canvas.script.WriteString(");\nctx.arc(")
	canvas.script.WriteString(rightR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(topR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(radius)
	canvas.script.WriteString(",Math.PI*3/2,Math.PI*2);\nctx.lineTo(")
	canvas.script.WriteString(right)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(bottomR)
	canvas.script.WriteString(");\nctx.arc(")
	canvas.script.WriteString(rightR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(bottomR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(radius)
	canvas.script.WriteString(",0,Math.PI/2);\nctx.lineTo(")
	canvas.script.WriteString(leftR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(bottom)
	canvas.script.WriteString(");\nctx.arc(")
	canvas.script.WriteString(leftR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(bottomR)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(radius)
	canvas.script.WriteString(",Math.PI/2,Math.PI);\nctx.closePath();")
}

func (canvas *canvasData) FillRoundedRect(x, y, width, height, r float64) {
	canvas.writeRoundedRect(x, y, width, height, r)
	canvas.script.WriteString("\nctx.fill();")
}

func (canvas *canvasData) StrokeRoundedRect(x, y, width, height, r float64) {
	canvas.writeRoundedRect(x, y, width, height, r)
	canvas.script.WriteString("\nctx.stroke();")
}

func (canvas *canvasData) FillAndStrokeRoundedRect(x, y, width, height, r float64) {
	canvas.writeRoundedRect(x, y, width, height, r)
	canvas.script.WriteString("\nctx.fill();\nctx.stroke();")
}

func (canvas *canvasData) writeEllipse(x, y, radiusX, radiusY, rotation float64) {
	yText := strconv.FormatFloat(y, 'g', -1, 64)
	canvas.script.WriteString("\nctx.beginPath();\nctx.moveTo(")
	canvas.script.WriteString(strconv.FormatFloat(x+radiusX, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(yText)
	canvas.script.WriteString(");\nctx.ellipse(")
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(yText)
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(radiusX, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(radiusY, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(rotation, 'g', -1, 64))
	canvas.script.WriteString(",0,Math.PI*2);")
}

func (canvas *canvasData) FillEllipse(x, y, radiusX, radiusY, rotation float64) {
	if radiusX >= 0 && radiusY >= 0 {
		canvas.writeEllipse(x, y, radiusX, radiusY, rotation)
		canvas.script.WriteString("\nctx.fill();")
	}
}

func (canvas *canvasData) StrokeEllipse(x, y, radiusX, radiusY, rotation float64) {
	if radiusX >= 0 && radiusY >= 0 {
		canvas.writeEllipse(x, y, radiusX, radiusY, rotation)
		canvas.script.WriteString("\nctx.stroke();")
	}
}

func (canvas *canvasData) FillAndStrokeEllipse(x, y, radiusX, radiusY, rotation float64) {
	if radiusX >= 0 && radiusY >= 0 {
		canvas.writeEllipse(x, y, radiusX, radiusY, rotation)
		canvas.script.WriteString("\nctx.fill();\nctx.stroke();")
	}
}

func (canvas *canvasData) writePointArgs(x, y float64) {
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y, 'g', -1, 64))
}

func (canvas *canvasData) writeStringArgs(text string, script *strings.Builder) {
	//rText := []rune(text)
	for _, ch := range text {
		switch ch {
		case '\t':
			script.WriteString(`\t`)
		case '\n':
			script.WriteString(`\n`)
		case '\r':
			script.WriteString(`\r`)
		case '\\':
			script.WriteString(`\\`)
		case '"':
			script.WriteString(`\"`)
		case '\'':
			script.WriteString(`\'`)
		default:
			if ch < ' ' {
				script.WriteString(fmt.Sprintf("\\x%02X", int(ch)))
			} else {
				script.WriteRune(ch)
			}
		}
	}
}

func (canvas *canvasData) FillText(x, y float64, text string) {
	canvas.script.WriteString("\nctx.fillText('")
	canvas.writeStringArgs(text, &canvas.script)
	canvas.script.WriteString(`',`)
	canvas.writePointArgs(x, y)
	canvas.script.WriteString(");")
}

func (canvas *canvasData) StrokeText(x, y float64, text string) {
	canvas.script.WriteString("\nctx.strokeText('")
	canvas.writeStringArgs(text, &canvas.script)
	canvas.script.WriteString(`',`)
	canvas.writePointArgs(x, y)
	canvas.script.WriteString(");")
}

func (canvas *canvasData) FillPath(path Path) {
	canvas.script.WriteString(path.scriptText())
	canvas.script.WriteString("\nctx.fill();")
}

func (canvas *canvasData) StrokePath(path Path) {
	canvas.script.WriteString(path.scriptText())
	canvas.script.WriteString("\nctx.stroke();")
}

func (canvas *canvasData) FillAndStrokePath(path Path) {
	canvas.script.WriteString(path.scriptText())
	canvas.script.WriteString("\nctx.fill();\nctx.stroke();")
}

func (canvas *canvasData) DrawLine(x0, y0, x1, y1 float64) {
	canvas.script.WriteString("\nctx.beginPath();\nctx.moveTo(")
	canvas.script.WriteString(strconv.FormatFloat(x0, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y0, 'g', -1, 64))
	canvas.script.WriteString(");\nctx.lineTo(")
	canvas.script.WriteString(strconv.FormatFloat(x1, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y1, 'g', -1, 64))
	canvas.script.WriteString(");\nctx.stroke();")
}

func (canvas *canvasData) DrawImage(x, y float64, image Image) {
	if image == nil || image.LoadingStatus() != ImageReady {
		return
	}
	canvas.script.WriteString("\nimg = images.get('")
	canvas.script.WriteString(image.URL())
	canvas.script.WriteString("');\nif (img) {\nctx.drawImage(img,")
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y, 'g', -1, 64))
	canvas.script.WriteString(");\n}")
}

func (canvas *canvasData) DrawImageInRect(x, y, width, height float64, image Image) {
	if image == nil || image.LoadingStatus() != ImageReady {
		return
	}
	canvas.script.WriteString("\nimg = images.get('")
	canvas.script.WriteString(image.URL())
	canvas.script.WriteString("');\nif (img) {\nctx.drawImage(img,")
	canvas.script.WriteString(strconv.FormatFloat(x, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(y, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(width, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(height, 'g', -1, 64))
	canvas.script.WriteString(");\n}")
}

func (canvas *canvasData) DrawImageFragment(srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight float64, image Image) {
	if image == nil || image.LoadingStatus() != ImageReady {
		return
	}
	canvas.script.WriteString("\nimg = images.get('")
	canvas.script.WriteString(image.URL())
	canvas.script.WriteString("');\nif (img) {\nctx.drawImage(img,")
	canvas.script.WriteString(strconv.FormatFloat(srcX, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(srcY, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(srcWidth, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(srcHeight, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(dstX, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(dstY, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(dstWidth, 'g', -1, 64))
	canvas.script.WriteRune(',')
	canvas.script.WriteString(strconv.FormatFloat(dstHeight, 'g', -1, 64))
	canvas.script.WriteString(");\n}")
}