canvas

package
v0.0.0-...-a8ee3e7 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Jul 11, 2022 License: Apache-2.0 Imports: 5 Imported by: 0

Documentation

Index

Constants

This section is empty.

Variables

View Source 
var CanvasCapRules = [...]string{
	"",
	"butt",
	"round",
	"square",
}
View Source 
var CanvasCompositeOperationsRules = [...]string{
	"",
	"source-over",
	"source-atop",
	"source-in",
	"source-out",
	"destination-over",
	"destination-atop",
	"destination-in",
	"destination-out",
	"lighter",
	"copy",
	"xor",
}
View Source 
var CanvasFillRules = [...]string{
	"",
	"nonzero",
	"evenodd",
}
View Source 
var CanvasFontAlignRules = [...]string{
	"",
	"start",
	"end",
	"center",
	"left",
	"right",
}
View Source 
var CanvasFontStyleRules = [...]string{
	"",
	"normal",
	"italic",
	"oblique",
}
View Source 
var CanvasFontVariantRules = [...]string{
	"",
	"normal",
	"small-caps",
}
View Source 
var CanvasFontWeightRules = [...]string{
	"",
	"normal",
	"bold",
	"bolder",
	"lighter",
	"100",
	"200",
	"300",
	"400",
	"500",
	"600",
	"700",
	"800",
	"900",
}
View Source 
var CanvasJoinRules = [...]string{
	"",
	"bevel",
	"round",
	"miter",
}
View Source 
var CanvasRepeatRules = [...]string{
	"",
	"repeat",
	"repeat-x",
	"repeat-y",
	"no-repeat",
}
View Source 
var CanvasTextBaseLineRules = [...]string{
	"",
	"alphabetic",
	"top",
	"hanging",
	"middle",
	"ideographic",
	"bottom",
}

Functions

This section is empty.

Types

type Canvas 

type Canvas struct {
	SelfContext     js.Value
	SelfContextType int
	Element
}

en: The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the <canvas> element, draws hardware-accelerated 2D and 3D graphics.

func (*Canvas) AppendToDocumentBody 

func (el *Canvas) AppendToDocumentBody()

func (*Canvas) Arc 

func (el *Canvas) Arc(x, y, radius, startAngle, endAngle iotmaker_types.Coordinate, anticlockwise bool)

en: Creates an arc/curve (used to create circles, or parts of circles) 

x:             The horizontal coordinate of the arc's center.
y:             The vertical coordinate of the arc's center.
radius:        The arc's radius. Must be positive.
startAngle:    The angle at which the arc starts in radians, measured from the positive x-axis.
endAngle:      The angle at which the arc ends in radians, measured from the positive x-axis.
anticlockwise: [Optional] An optional Boolean. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

func (*Canvas) ArcTo 

func (el *Canvas) ArcTo(x1, y1, x2, y2, radius iotmaker_types.Coordinate)

en: Creates an arc/curve between two tangents 

x1:     The x-axis coordinate of the first control point.
y1:     The y-axis coordinate of the first control point.
x2:     The x-axis coordinate of the second control point.
y2:     The y-axis coordinate of the second control point.
radius: The arc's radius. Must be non-negative.

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);              // Create a starting point
ctx.lineTo(100, 20);             // Create a horizontal line
ctx.arcTo(150, 20, 150, 70, 50); // Create an arc
ctx.lineTo(150, 120);            // Continue with vertical line
ctx.stroke();                    // Draw it

func (*Canvas) BeginPath 

func (el *Canvas) BeginPath()
	en: Begins a path, or resets the current path
     The beginPath() method begins a path, or resets the current path.
     Tip: Use moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc(), to create paths.
     Tip: Use the stroke() method to actually draw the path on the canvas.

func (*Canvas) BezierCurveTo 

func (el *Canvas) BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y iotmaker_types.Coordinate)

en: Creates a cubic Bézier curve 

cp1x: The x-axis coordinate of the first control point.
cp1y: The y-axis coordinate of the first control point.
cp2x: The x-axis coordinate of the second control point.
cp2y: The y-axis coordinate of the second control point.
x:    The x-axis coordinate of the end point.
y:    The y-axis coordinate of the end point.

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

func (*Canvas) Call 

func (el *Canvas) Call(jsFunction string, value interface{}) js.Value

func (*Canvas) ClearRect 

func (el *Canvas) ClearRect(x, y, width, height iotmaker_types.Coordinate)

en: Clears the specified pixels within a given rectangle 

x:      The x-coordinate of the upper-left corner of the rectangle to clear
y:      The y-coordinate of the upper-left corner of the rectangle to clear
width:  The width of the rectangle to clear, in pixels
height: The height of the rectangle to clear, in pixels

The clearRect() method clears the specified pixels within a given rectangle.
JavaScript syntax: context.clearRect(x, y, width, height);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.clearRect(20, 20, 100, 50);

func (*Canvas) Clip 

func (el *Canvas) Clip(x, y iotmaker_types.Coordinate)

en: Clips a region of any shape and size from the original canvas 

The clip() method clips a region of any shape and size from the original canvas.
Tip: Once a region is clipped, all future drawing will be limited to the clipped region (no access to other
regions on the canvas). You can however save the current canvas region using the save() method before using the
clip() method, and restore it (with the restore() method) any time in the future.

func (*Canvas) ClosePath 

func (el *Canvas) ClosePath(x, y iotmaker_types.Coordinate)

en: Creates a path from the current point back to the starting point 

The closePath() method creates a path from the current point back to the starting point.
Tip: Use the stroke() method to actually draw the path on the canvas.
Tip: Use the fill() method to fill the drawing (black is default). Use the fillStyle property to fill with
another color/gradient.

func (*Canvas) CreateEvent 

func (el *Canvas) CreateEvent()

func (*Canvas) CreateImageData 

func (el *Canvas) CreateImageData(data js.Value)

en: Creates a new, blank ImageData object 

width:     The width of the new ImageData object, in pixels
height:    The height of the new ImageData object, in pixels
imageData: AnotherImageData object

There are two versions of the createImageData() method:
1. This creates a new ImageData object with the specified dimensions (in pixels):
JavaScript syntax: var imgData = context.createImageData(width, height);

2. This creates a new ImageData object with the same dimensions as the object specified by anotherImageData (this
does not copy the image data):
JavaScript syntax: var imgData = context.createImageData(imageData);

The createImageData() method creates a new, blank ImageData object. The new object's pixel values are transparent
black by default.
For every pixel in an ImageData object there are four pieces of information, the RGBA values:

R - The color red (from 0-255)
G - The color green (from 0-255)
B - The color blue (from 0-255)
A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

So, transparent black indicates: (0, 0, 0, 0).
The color/alpha information is held in an array, and since the array contains 4 pieces of information for every
pixel, the array's size is 4 times the size of the ImageData object: width*height*4. (An easier way to find the
size of the array, is to use ImageDataObject.data.length)

The array containing the color/alpha information is stored in the data property of the ImageData object.
Tip: After you have manipulated the color/alpha information in the array, you can copy the image data back onto
the canvas with the putImageData() method.

Examples:

The syntax for making the first pixel in the ImageData object red:
     imgData = ctx.createImageData(100, 100);
     imgData.data[0] = 255;
     imgData.data[1] = 0;
     imgData.data[2] = 0;
     imgData.data[3] = 255;

The syntax for making the second pixel in the ImageData object green:
     imgData = ctx.createImageData(100, 100);
     imgData.data[4] = 0;
     imgData.data[5] = 255;
     imgData.data[6] = 0;
     imgData.data[7] = 255;

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4)
{
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 10, 10);

todo: fazer

func (*Canvas) CreateLinearGradient 

func (el *Canvas) CreateLinearGradient(x0, y0, x1, y1 iotmaker_types.Coordinate)

en: Creates a linear gradient (to use on canvas content) 

x0: The x-coordinate of the start point of the gradient
y0: The y-coordinate of the start point of the gradient
x1: The x-coordinate of the end point of the gradient
y1: The y-coordinate of the end point of the gradient

The createLinearGradient() method creates a linear gradient object.
The gradient can be used to fill rectangles, circles, lines, text, etc.
Tip: Use this object as the value to the strokeStyle or fillStyle properties.
Tip: Use the addColorStop() method to specify different colors, and where to position the colors in the gradient object.
JavaScript syntax:	context.createLinearGradient(x0, y0, x1, y1);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 150, 100);

func (*Canvas) CreatePattern 

func (el *Canvas) CreatePattern(image js.Value, repeatRule CanvasRepeatRule)

en: Repeats a specified element in the specified direction 

image: Specifies the image, canvas, or video element of the pattern to use
repeatedElement
     repeat: Default. The pattern repeats both horizontally and vertically
     repeat-x: The pattern repeats only horizontally
     repeat-y: The pattern repeats only vertically
     no-repeat: The pattern will be displayed only once (no repeat)

The createPattern() method repeats the specified element in the specified direction.
The element can be an image, video, or another <canvas> element.
The repeated element can be used to draw/fill rectangles, circles, lines etc.
JavaScript syntax:	context.createPattern(image, "repeat|repeat-x|repeat-y|no-repeat");

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();

func (*Canvas) CreateRadialGradient 

func (el *Canvas) CreateRadialGradient(x0, y0, r0, x1, y1, r1 iotmaker_types.Coordinate)

en: Creates a radial/circular gradient (to use on canvas content) 

x0: The x-coordinate of the starting circle of the gradient
y0: The y-coordinate of the starting circle of the gradient
r0: The radius of the starting circle
x1: The x-coordinate of the ending circle of the gradient
y1: The y-coordinate of the ending circle of the gradient
r1: The radius of the ending circle

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 100);

func (*Canvas) Data 

func (el *Canvas) Data() js.Value

en: Returns an object that contains image data of a specified ImageData object 

JavaScript syntax: imageData.data;
The data property returns an object that contains image data of the specified ImageData object.
For every pixel in an ImageData object there are four pieces of information, the RGBA values:

R - The color red (from 0-255)
G - The color green (from 0-255)
B - The color blue (from 0-255)
A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

The color/alpha information is held in an array, and is stored in the data property of the ImageData object.

Examples:

The syntax for making the first pixel in the ImageData object red:
     imgData = ctx.createImageData(100, 100);
     imgData.data[0] = 255;
     imgData.data[1] = 0;
     imgData.data[2] = 0;
     imgData.data[3] = 255;

The syntax for making the second pixel in the ImageData object green:
     imgData = ctx.createImageData(100, 100);
     imgData.data[4] = 0;
     imgData.data[5] = 255;
     imgData.data[6] = 0;
     imgData.data[7] = 255;

Tip: Look at createImageData(), getImageData(), and putImageData() to learn more about the ImageData object.

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
for (var i = 0; i < imgData.data.length; i += 4) {
  imgData.data[i+0] = 255;
  imgData.data[i+1] = 0;
  imgData.data[i+2] = 0;
  imgData.data[i+3] = 255;
}
ctx.putImageData(imgData, 10, 10);

func (*Canvas) DrawImage 

func (el *Canvas) DrawImage(value DrawImage)

en: Draws an image, canvas, or video onto the canvas 

img:     Specifies the image, canvas, or video element to use
sx:      Optional. The x coordinate where to start clipping
sy:      Optional. The y coordinate where to start clipping
swidth:  Optional. The width of the clipped image
sheight: Optional. The height of the clipped image
x:       The x coordinate where to place the image on the canvas
y:       The y coordinate where to place the image on the canvas
width:   Optional. The width of the image to use (stretch or reduce the image)
height:  Optional. The height of the image to use (stretch or reduce the image)

The drawImage() method draws an image, canvas, or video onto the canvas.
The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.

Position the image on the canvas:
JavaScript syntax: context.drawImage(img, x, y);

Position the image on the canvas, and specify width and height of the image:
JavaScript syntax: context.drawImage(img, x, y, width, height);

Clip the image and position the clipped part on the canvas:
JavaScript syntax: context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

func (*Canvas) Fill 

func (el *Canvas) Fill()

en: Fills the current drawing (path) 

The fill() method fills the current drawing (path). The default color is black.
Tip: Use the fillStyle property to fill with another color/gradient.
Note: If the path is not closed, the fill() method will add a line from the last point to the startpoint of the
path to close the path (like closePath()), and then fill the path.

func (*Canvas) FillRect 

func (el *Canvas) FillRect(x, y, width, height iotmaker_types.Coordinate)

en: Draws a "filled" rectangle 

x:      The x-coordinate of the upper-left corner of the rectangle
y:      The y-coordinate of the upper-left corner of the rectangle
width:  The width of the rectangle, in pixels
height: The height of the rectangle, in pixels

The fillRect() method draws a "filled" rectangle. The default color of the fill is black.
Tip: Use the fillStyle property to set a color, gradient, or pattern used to fill the drawing.
JavaScript syntax: context.fillRect(x, y, width, height);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

func (*Canvas) FillStyle 

func (el *Canvas) FillStyle(value string)

en: Sets or returns the color, gradient, or pattern used to fill the drawing 

The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing.
Default value:	#000000
JavaScript syntax:	context.fillStyle = color|gradient|pattern;

func (*Canvas) FillText 

func (el *Canvas) FillText(text string, x, y, maxWidth iotmaker_types.Coordinate)

en: Draws "filled" text on the canvas 

text:     Specifies the text that will be written on the canvas
x:        The x coordinate where to start painting the text (relative to the canvas)
y:        The y coordinate where to start painting the text (relative to the canvas)
maxWidth: Optional. The maximum allowed width of the text, in pixels

The fillText() method draws filled text on the canvas. The default color of the text is black.
Tip: Use the font property to specify font and font size, and use the fillStyle property to render the text in another color/gradient.
JavaScript syntax: context.fillText(text, x, y, maxWidth);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);

func (*Canvas) Font 

func (el *Canvas) Font(font Font)

en: Sets or returns the current font properties for text content 

font-style:            Specifies the font style. Possible values:
     normal | italic | oblique

font-variant:          Specifies the font variant. Possible values:
     normal | small-caps

font-weight:           Specifies the font weight. Possible values:
     normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-size/line-height: Specifies the font size and the line-height, in pixels
font-family:           Specifies the font family
caption:               Use the font captioned controls (like buttons, drop-downs, etc.)
icon:                  Use the font used to label icons
menu:                  Use the font used in menus (drop-down menus and menu lists)
message-box:           Use the font used in dialog boxes
small-caption:         Use the font used for labeling small controls
status-bar:            Use the fonts used in window status bar

The font property sets or returns the current font properties for text content on the canvas.
The font property uses the same syntax as the CSS font property.
Default value: 10px sans-serif
JavaScript syntax: context.font = "italic small-caps bold 12px arial";

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

func (*Canvas) Get 

func (el *Canvas) Get(jsParam string, value ...interface{}) iotmaker_types.Coordinate

func (*Canvas) GetCanvas 

func (el *Canvas) GetCanvas() js.Value

func (*Canvas) GetContext 

func (el *Canvas) GetContext() js.Value

func (*Canvas) GetImageData 

func (el *Canvas) GetImageData(x, y, width, height iotmaker_types.Coordinate) [][]color.RGBA

en: Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas 

x:      The x coordinate (in pixels) of the upper-left corner to start copy from
y:      The y coordinate (in pixels) of the upper-left corner to start copy from
width:  The width of the rectangular area you will copy
height: The height of the rectangular area you will copy
return: [x][y]color.RGBA
        Note: return x and y are relative to the coordinate (0,0) on the image

JavaScript syntax: context.getImageData(x, y, width, height);

The getImageData() method returns an ImageData object that copies the pixel data for the specified rectangle on a
canvas.
Note: The ImageData object is not a picture, it specifies a part (rectangle) on the canvas, and holds information
of every pixel inside that rectangle.

For every pixel in an ImageData object there are four pieces of information, the RGBA values:
R - The color red (from 0-255)
G - The color green (from 0-255)
B - The color blue (from 0-255)
A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

The color/alpha information is held in an array, and is stored in the data property of the ImageData object.
Tip: After you have manipulated the color/alpha information in the array, you can copy the image data back onto
the canvas with the putImageData() method.

Example:
The code for getting color/alpha information of the first pixel in the returned ImageData object:
     red = imgData.data[0];
     green = imgData.data[1];
     blue = imgData.data[2];
     alpha = imgData.data[3];

Tip: You can also use the getImageData() method to invert the color of every pixels of an image on the canvas.

Loop through all the pixels and change the color values using this formula:
     red = 255-old_red;
     green = 255-old_green;
     blue = 255-old_blue;

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
  var imgData = ctx.getImageData(10, 10, 50, 50);
  ctx.putImageData(imgData, 10, 70);
}

func (*Canvas) GlobalAlpha 

func (el *Canvas) GlobalAlpha(value iotmaker_types.Coordinate)

en: Sets or returns the current alpha or transparency value of the drawing 

number: The transparency value. Must be a number between 0.0 (fully transparent) and 1.0 (no transparancy)

Default value: 1.0
JavaScript syntax: context.globalAlpha = number;

The globalAlpha property sets or returns the current alpha or transparency value of the drawing.
The globalAlpha property value must be a number between 0.0 (fully transparent) and 1.0 (no transparancy)

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);

func (*Canvas) GlobalCompositeOperation 

func (el *Canvas) GlobalCompositeOperation(value CanvasCompositeOperationsRule)

en: Sets or returns how a new image are drawn onto an existing image 

The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination
(existing) image.
source image = drawings you are about to place onto the canvas.
destination image = drawings that are already placed onto the canvas.

Default value: source-over
JavaScript syntax: context.globalCompositeOperation = "source-in";
Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "red";
ctx.fillRect(150, 20, 75, 50);
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "blue";
ctx.fillRect(180, 50, 75, 50);

func (*Canvas) Height 

func (el *Canvas) Height() iotmaker_types.Coordinate

en: Returns the height of an ImageData object 

The height property returns the height of an ImageData object, in pixels.
Tip: Look at createImageData(), getImageData(), and putImageData() to learn more about the ImageData object.
JavaScript syntax: imgData.height;

func (*Canvas) InitializeContext2DById 

func (el *Canvas) InitializeContext2DById(id string)

todo: tem que saber que id é um canvas

func (*Canvas) InitializeContext3DById 

func (el *Canvas) InitializeContext3DById(id string)

todo: tem que saber que id é um canvas

func (*Canvas) IsPointInPath 

func (el *Canvas) IsPointInPath(path js.Value, x, y iotmaker_types.Coordinate, fillRule CanvasFillRule) bool

en: Returns true if the specified point is in the current path, otherwise false 

 x: The x-axis coordinate of the point to check.
 y: The y-axis coordinate of the point to check.
 fillRule: The algorithm by which to determine if a point is inside or outside the path.
      "nonzero": The non-zero winding rule. Default rule.
      "evenodd": The even-odd winding rule.
 path: A Path2D path to check against. If unspecified, the current path is used.

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
if (ctx.isPointInPath(20, 50)) {
  ctx.stroke();
};

func (*Canvas) LineCap 

func (el *Canvas) LineCap(value CanvasCapRule)

en: Sets or returns the style of the end caps for a line 

PlatformBasicType: "butt|round|square"

The lineCap property sets or returns the style of the end caps for a line.
Note: The value "round" and "square" make the lines slightly longer.

Default value: butt
JavaScript syntax: context.lineCap = "butt|round|square";

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 20);
ctx.lineTo(20, 200);
ctx.stroke();

func (*Canvas) LineJoin 

func (el *Canvas) LineJoin(value CanvasJoinRule)

en: Sets or returns the type of corner created, when two lines meet 

PlatformBasicType: "bevel|round|miter"

The lineJoin property sets or returns the type of corner created, when two lines meet.
Note: The "miter" value is affected by the miterLimit property.
Default value:	miter
JavaScript syntax:	context.lineJoin = "bevel|round|miter";

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.stroke();

func (*Canvas) LineTo 

func (el *Canvas) LineTo(x, y iotmaker_types.Coordinate)

en: Adds a new point and creates a line from that point to the last specified point in the canvas 

x: The x-coordinate of where to create the line to
y: The y-coordinate of where to create the line to
The lineTo() method adds a new point and creates a line from that point to the last specified point in the canvas
(this method does not draw the line).
Tip: Use the stroke() method to actually draw the path on the canvas.

func (*Canvas) LineWidth 

func (el *Canvas) LineWidth(value iotmaker_types.Coordinate)

en: Sets or returns the current line width 

PlatformBasicType: The current line width, in pixels

The lineWidth property sets or returns the current line width, in pixels.
Default value: 1
JavaScript syntax: context.lineWidth = number;

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.strokeRect(20, 20, 80, 100);

func (*Canvas) MeasureText 

func (el *Canvas) MeasureText(text string)

en: Returns an object that contains the width of the specified text 

text: The text to be measured

The measureText() method returns an object that contains the width of the specified text, in pixels.
Tip: Use this method if you need to know the width of a text, before writing it on the canvas.
JavaScript syntax: context.measureText(text).width;

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);

func (*Canvas) MiterLimit 

func (el *Canvas) MiterLimit(value iotmaker_types.Coordinate)

en: Sets or returns the maximum miter length 

PlatformBasicType: A positive number that specifies the maximum miter length. If the current miter length exceeds the
       miterLimit, the corner will display as lineJoin "bevel"

The miterLimit property sets or returns the maximum miter length.
The miter length is the distance between the inner corner and the outer corner where two lines meet.

Default value: 10
JavaScript syntax: context.miterLimit = number;

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.lineJoin = "miter";
ctx.miterLimit = 5;
ctx.moveTo(20, 20);
ctx.lineTo(50, 27);
ctx.lineTo(20, 34);
ctx.stroke();

func (*Canvas) MoveTo 

func (el *Canvas) MoveTo(x, y iotmaker_types.Coordinate)

en: Moves the path to the specified point in the canvas, without creating a line 

x: The x-coordinate of where to move the path to
y: The y-coordinate of where to move the path to
The moveTo() method moves the path to the specified point in the canvas, without creating a line.
Tip: Use the stroke() method to actually draw the path on the canvas.

func (*Canvas) PutImageData 

func (el *Canvas) PutImageData(imgData js.Value, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight iotmaker_types.Coordinate)

en: Puts the image data (from a specified ImageData object) back onto the canvas 

imgData:     Specifies the ImageData object to put back onto the canvas
x:           The x-coordinate, in pixels, of the upper-left corner of where to place the image on the canvas
y:           The y-coordinate, in pixels, of the upper-left corner of where to place the image on the canvas
dirtyX:      Optional. The x-coordinate, in pixels, of the upper-left corner of where to start drawing the image.
             Default 0
dirtyY:      Optional. The y-coordinate, in pixels, of the upper-left corner of where to start drawing the image.
             Default 0
dirtyWidth:  Optional. The width to use when drawing the image on the canvas. Default: the width of the extracted
             image
dirtyHeight: Optional. The height to use when drawing the image on the canvas. Default: the height of the
             extracted image

JavaScript syntax: context.putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

The putImageData() method puts the image data (from a specified ImageData object) back onto the canvas.
Tip: Read about the getImageData() method that copies the pixel data for a specified rectangle on a canvas.
Tip: Read about the createImageData() method that creates a new, blank ImageData object.

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy() {
  var imgData = ctx.getImageData(10, 10, 50, 50);
  ctx.putImageData(imgData, 10, 70);
}

todo: fazer

func (*Canvas) QuadraticCurveTo 

func (el *Canvas) QuadraticCurveTo(cpx, cpy, x, y iotmaker_types.Coordinate)

en: Creates a quadratic Bézier curve 

cpx: The x-axis coordinate of the control point.
cpy: The y-axis coordinate of the control point.
x:   The x-axis coordinate of the end point.
y:   The y-axis coordinate of the end point.

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();

func (*Canvas) Rect 

func (el *Canvas) Rect(x, y, width, height iotmaker_types.Coordinate)

en: Creates a rectangle 

x:      The x-coordinate of the upper-left corner of the rectangle
y:      The y-coordinate of the upper-left corner of the rectangle
width:  The width of the rectangle, in pixels
height: The height of the rectangle, in pixels

The rect() method creates a rectangle.
Tip: Use the stroke() or the fill() method to actually draw the rectangle on the canvas.
JavaScript syntax: context.rect(x, y, width, height);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();

func (*Canvas) Restore 

func (el *Canvas) Restore()

en: Returns previously saved path state and attributes

func (*Canvas) Rotate 

func (el *Canvas) Rotate(angle iotmaker_types.Coordinate)

en: Rotates the current drawing 

angle: The rotation angle, in radians.
       To calculate from degrees to radians: degrees*Math.PI/180.
       Example: to rotate 5 degrees, specify the following: 5*Math.PI/180

The rotate() method rotates the current drawing.
Note: The rotation will only affect drawings made AFTER the rotation is done.
JavaScript syntax: context.rotate(angle);

Example:
var c = document.getElementById("my Canvas");
var ctx = c.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);

func (*Canvas) Save 

func (el *Canvas) Save()

en: Saves the state of the current context

func (*Canvas) Scale 

func (el *Canvas) Scale(scaleWidth, scaleHeight iotmaker_types.Coordinate)

en: Scales the current drawing bigger or smaller 

scaleWidth:  Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)
scaleHeight: Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)

The scale() method scales the current drawing, bigger or smaller.
Note: If you scale a drawing, all future drawings will also be scaled. The positioning will also be scaled. If
you scale(2,2); drawings will be positioned twice as far from the left and top of the canvas as you specify.
JavaScript syntax: context.scale(scalewidth, scaleheight);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);

func (*Canvas) Set 

func (el *Canvas) Set(jsParam string, value ...interface{})

func (*Canvas) SetTransform 

func (el *Canvas) SetTransform(a, b, c, d, e, f iotmaker_types.Coordinate)

en: Resets the current transform to the identity matrix. Then runs transform() 

a: Scales the drawings horizontally
b: Skews the drawings horizontally
c: Skews the drawings vertically
d: Scales the drawings vertically
e: Moves the the drawings horizontally
f: Moves the the drawings vertically

Each object on the canvas has a current transformation matrix.
The setTransform() method resets the current transform to the identity matrix, and then runs transform() with the
same arguments.
In other words, the setTransform() method lets you scale, rotate, move, and skew the current context.
Note: The transformation will only affect drawings made after the setTransform method is called.
JavaScript syntax: context.setTransform(a, b, c, d, e, f);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 250, 100)
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100);
ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 250, 100);

func (*Canvas) Stroke 

func (el *Canvas) Stroke()

en: Actually draws the path you have defined 

The stroke() method actually draws the path you have defined with all those moveTo() and lineTo() methods. The
default color is black.
Tip: Use the strokeStyle property to draw with another color/gradient.

func (*Canvas) StrokeRect 

func (el *Canvas) StrokeRect(x, y, width, height iotmaker_types.Coordinate)

en: Draws a rectangle (no fill) 

x:      The x-coordinate of the upper-left corner of the rectangle
y:      The y-coordinate of the upper-left corner of the rectangle
width:  The width of the rectangle, in pixels
height: The height of the rectangle, in pixels

The strokeRect() method draws a rectangle (no fill). The default color of the stroke is black.
Tip: Use the strokeStyle property to set a color, gradient, or pattern to style the stroke.
JavaScript syntax: context.strokeRect(x, y, width, height);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(20, 20, 150, 100);

func (*Canvas) StrokeStyle 

func (el *Canvas) StrokeStyle(value string)

en: Sets or returns the color, gradient, or pattern used for strokes 

The strokeStyle property sets or returns the color, gradient, or pattern used for strokes.
Default value: #000000
JavaScript syntax: context.strokeStyle = color|gradient|pattern;

func (*Canvas) StrokeText 

func (el *Canvas) StrokeText(text string, x, y, maxWidth iotmaker_types.Coordinate)

en: Draws text on the canvas (no fill) 

text:     Specifies the text that will be written on the canvas
x:        The x coordinate where to start painting the text (relative to the canvas)
y:        The y coordinate where to start painting the text (relative to the canvas)
maxWidth: Optional. The maximum allowed width of the text, in pixels

The strokeText() method draws text (with no fill) on the canvas. The default color of the text is black.
Tip: Use the font property to specify font and font size, and use the strokeStyle property to render the text in another color/gradient.
JavaScript syntax: context.strokeText(text, x, y, maxWidth);

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.strokeText("Hello World!", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 90);

func (*Canvas) TextAlign 

func (el *Canvas) TextAlign(value CanvasFontAlignRule)

en: Sets or returns the current alignment for text content 

The textAlign property sets or returns the current alignment for text content, according to the anchor point.
Normally, the text will START in the position specified, however, if you set textAlign="right" and place the text in position 150, it means that the text should END in position 150.
Tip: Use the fillText() or the strokeText() method to actually draw and position the text on the canvas.
Default value: start
JavaScript syntax: context.textAlign = "center | end | left | right | start";

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Show the different textAlign values
ctx.textAlign = "start";
ctx.fillText("textAlign = start", 150, 60);
ctx.textAlign = "end";
ctx.fillText("textAlign = end", 150, 80);
ctx.textAlign = "left";
ctx.fillText("textAlign = left", 150, 100);
ctx.textAlign = "center";
ctx.fillText("textAlign = center", 150, 120);
ctx.textAlign = "right";
ctx.fillText("textAlign = right", 150, 140);

func (*Canvas) TextBaseline 

func (el *Canvas) TextBaseline(value CanvasTextBaseLineRule)

en: Sets or returns the current text baseline used when drawing text 

PlatformBasicType:
     alphabetic:  Default. The text baseline is the normal alphabetic baseline
     top:         The text baseline is the top of the em square
     hanging:     The text baseline is the hanging baseline
     middle:      The text baseline is the middle of the em square
     ideographic: The text baseline is the ideographic baseline
     bottom:      The text baseline is the bottom of the bounding box

The textBaseline property sets or returns the current text baseline used when drawing text.
Note: The fillText() and strokeText() methods will use the specified textBaseline value when positioning the text
on the canvas.
Default value: alphabetic
JavaScript syntax: context.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();
ctx.font = "20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline = "top";
ctx.fillText("Top", 5, 100);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom", 50, 100);
ctx.textBaseline = "middle";
ctx.fillText("Middle", 120, 100);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic", 190, 100);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging", 290, 100);

func (*Canvas) Transform 

func (el *Canvas) Transform(a, b, c, d, e, f iotmaker_types.Coordinate)

en: Replaces the current transformation matrix for the drawing 

 a: Scales the drawing horizontally
 b: Skew the the drawing horizontally
 c: Skew the the drawing vertically
 d: Scales the drawing vertically
 e: Moves the the drawing horizontally
 f: Moves the the drawing vertically

 Each object on the canvas has a current transformation matrix.
 The transform() method replaces the current transformation matrix. It multiplies the current transformation
 matrix with the matrix described by:

 a | c | e
-----------
 b | d | f
-----------
 0 | 0 | 1

 In other words, the transform() method lets you scale, rotate, move, and skew the current context.
 Note: The transformation will only affect drawings made after the transform() method is called.
 Note: The transform() method behaves relatively to other transformations made by rotate(), scale(), translate(),
 or transform(). Example: If you already have set your drawing to scale by two, and the transform() method scales
 your drawings by two, your drawings will now scale by four.
 Tip: Check out the setTransform() method, which does not behave relatively to other transformations.
 JavaScript syntax: context.transform(a, b, c, d, e, f);

 Example:
 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.fillStyle = "yellow";
 ctx.fillRect(0, 0, 250, 100)
 ctx.transform(1, 0.5, -0.5, 1, 30, 10);
 ctx.fillStyle = "red";
 ctx.fillRect(0, 0, 250, 100);
 ctx.transform(1, 0.5, -0.5, 1, 30, 10);
 ctx.fillStyle = "blue";
 ctx.fillRect(0, 0, 250, 100);

func (*Canvas) Translate 

func (el *Canvas) Translate(x, y iotmaker_types.Coordinate)

en: Remaps the (0,0) position on the canvas 

x: The value to add to horizontal (x) coordinates
y: The value to add to vertical (y) coordinates

The translate() method remaps the (0,0) position on the canvas.
Note: When you call a method such as fillRect() after translate(), the value is added to the x- and y-coordinate
values.
JavaScript syntax: context.translate(x, y);

Example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect(10, 10, 100, 50);

func (*Canvas) Width 

func (el *Canvas) Width() iotmaker_types.Coordinate

en: Returns the width of an ImageData object 

The width property returns the width of an ImageData object, in pixels.
Tip: Look at createImageData(), getImageData(), and putImageData() to learn more about the ImageData object.
JavaScript syntax: imgData.width;

type CanvasCapRule 

type CanvasCapRule int
const (
	// en: Default. A flat edge is added to each end of the line
	KCapRuleButt CanvasCapRule = iota + 1

	// en: A rounded end cap is added to each end of the line
	KCapRuleRound

	// en: A square end cap is added to each end of the line
	KCapRuleSquare
)

func (CanvasCapRule) String 

func (el CanvasCapRule) String() string

type CanvasCompositeOperationsRule 

type CanvasCompositeOperationsRule int
const (
	// en: Default. Displays the source image over the destination image
	KCompositeOperationsRuleSourceOver CanvasCompositeOperationsRule = iota + 1

	// en: Displays the source image on top of the destination image. The part of the source image that is outside the
	// destination image is not shown
	KCompositeOperationsRuleSourceAtop

	// en: Displays the source image in to the destination image. Only the part of the source image that is INSIDE the
	// destination image is shown, and the destination image is transparent
	KCompositeOperationsRuleSourceIn

	// en: Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the
	// destination image is shown, and the destination image is transparent
	KCompositeOperationsRuleSourceOut

	// en: Displays the destination image over the source image
	KCompositeOperationsRuleDestinationOver

	// en: Displays the destination image on top of the source image. The part of the destination image that is outside
	// the source image is not shown
	KCompositeOperationsRuleDestinationAtop

	// en: Displays the destination image in to the source image. Only the part of the destination image that is INSIDE
	// the source image is shown, and the source image is transparent
	KCompositeOperationsRuleDestinationIn

	// en: Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE
	// the source image is shown, and the source image is transparent
	KCompositeOperationsRuleDestinationOut

	// en: Displays the source image + the destination image
	KCompositeOperationsRuleLighter

	// en: Displays the source image. The destination image is ignored
	KCompositeOperationsRuleCopy

	// en: The source image is combined by using an exclusive OR with the destination image
	KCompositeOperationsRuleXor
)

func (CanvasCompositeOperationsRule) String 

func (el CanvasCompositeOperationsRule) String() string

type CanvasFillRule 

type CanvasFillRule int
const (
	// en: In two-dimensional computer graphics, the non-zero winding rule is a means of determining whether a given point
	// falls within an enclosed curve. Unlike the similar even-odd rule, it relies on knowing the direction of stroke for
	// each part of the curve.
	KFillRuleNonZero CanvasFillRule = iota + 1

	// en: The even–odd rule is an algorithm implemented in vector-based graphic software,[1] like the PostScript language
	// and Scalable Vector Graphics (SVG), which determines how a graphical shape with more than one closed outline will
	// be filled. Unlike the nonzero-rule algorithm, this algorithm will alternatively color and leave uncolored shapes
	// defined by nested closed paths irrespective of their winding.
	KFillRuleEvenOdd
)

func (CanvasFillRule) String 

func (el CanvasFillRule) String() string

type CanvasFontAlignRule 

type CanvasFontAlignRule int
const (
	// en: Default. The text starts at the specified position
	KFontAlignRuleStart CanvasFontAlignRule = iota + 1

	// en: The text ends at the specified position
	KFontAlignRuleEnd

	// en: The center of the text is placed at the specified position
	KFontAlignRuleCenter

	// en: The text starts at the specified position
	KFontAlignRuleLeft

	// en: The text ends at the specified position
	KFontAlignRuleRight
)

func (CanvasFontAlignRule) String 

func (el CanvasFontAlignRule) String() string

type CanvasFontStyleRule 

type CanvasFontStyleRule int
const (
	// en: 	Specifies the font style normal.
	KFontStyleRuleNormal CanvasFontStyleRule = iota + 1

	// en: 	Specifies the font style italic.
	KFontStyleRuleItalic

	// en: 	Specifies the font style oblique.
	KFontStyleRuleOblique
)

func (CanvasFontStyleRule) String 

func (el CanvasFontStyleRule) String() string

type CanvasFontVariantRule 

type CanvasFontVariantRule int
const (
	// en: Specifies the font variant normal.
	KFontVariantRuleNormal CanvasFontVariantRule = iota + 1

	// en: Specifies the font variant small-caps.
	KFontVariantRuleSmallCaps
)

func (CanvasFontVariantRule) String 

func (el CanvasFontVariantRule) String() string

type CanvasFontWeightRule 

type CanvasFontWeightRule int
const (
	// en: Specifies the font weight normal.
	KFontWeightRuleNormal CanvasFontWeightRule = iota + 1

	// en: Specifies the font weight bold.
	KFontWeightRuleBold

	// en: Specifies the font weight bolder.
	KFontWeightRuleBolder

	// en: Specifies the font weight lighter.
	KFontWeightRuleLighter

	// en: Specifies the font weight 100.
	KFontWeightRule100

	// en: Specifies the font weight 200.
	KFontWeightRule200

	// en: Specifies the font weight 300.
	KFontWeightRule300

	// en: Specifies the font weight 400.
	KFontWeightRule400

	// en: Specifies the font weight 500.
	KFontWeightRule500

	// en: Specifies the font weight 600.
	KFontWeightRule600

	// en: Specifies the font weight 700.
	KFontWeightRule700

	// en: Specifies the font weight 800.
	KFontWeightRule800

	// en: Specifies the font weight 900.
	KFontWeightRule900
)

func (CanvasFontWeightRule) String 

func (el CanvasFontWeightRule) String() string

type CanvasJoinRule 

type CanvasJoinRule int
const (
	// en: Creates a beveled corner
	KJoinRuleBevel CanvasJoinRule = iota + 1

	// en: A Creates a rounded corner
	KJoinRuleRound

	// en: Default. Creates a sharp corner
	KJoinRuleMiter
)

func (CanvasJoinRule) String 

func (el CanvasJoinRule) String() string

type CanvasRepeatRule 

type CanvasRepeatRule int
const (
	// en: Default. The pattern repeats both horizontally and vertically
	KRepeatRuleRepeat CanvasRepeatRule = iota + 1

	// en: The pattern repeats only horizontally
	KRepeatRuleRepeatX

	// en: The pattern repeats only vertically
	KRepeatRuleRepeatY

	// en: The pattern will be displayed only once (no repeat)
	KRepeatRuleNoRepeat
)

func (CanvasRepeatRule) String 

func (el CanvasRepeatRule) String() string

type CanvasTextBaseLineRule 

type CanvasTextBaseLineRule int
const (
	// en: Default. The text baseline is the normal alphabetic baseline
	KTextBaseLineRuleAlphabetic CanvasTextBaseLineRule = iota + 1

	// en: The text baseline is the top of the em square
	KTextBaseLineRuleTop

	// en: The text baseline is the hanging baseline
	KTextBaseLineRuleHanging

	// en: The text baseline is the middle of the em square
	KTextBaseLineRuleMiddle

	// en: The text baseline is the ideographic baseline
	KTextBaseLineRuleIdeographic

	// en: The text baseline is the bottom of the bounding box
	KTextBaseLineRuleBottom
)

func (CanvasTextBaseLineRule) String 

func (el CanvasTextBaseLineRule) String() string

type Document 

type Document struct {
	// contains filtered or unexported fields
}

func (*Document) AppendChild 

func (el *Document) AppendChild(element string, value interface{})

func (*Document) AppendChildToDocumentBody 

func (el *Document) AppendChildToDocumentBody(value interface{})

func (*Document) Get 

func (el *Document) Get() js.Value

func (*Document) Initialize 

func (el *Document) Initialize()

type DrawImage 

type DrawImage struct {
	// en: Specifies the image, canvas, or video element to use
	Image js.Value

	// en: The x coordinate where to place the image on the canvas
	X iotmaker_types.Coordinate

	// en: The y coordinate where to place the image on the canvas
	Y iotmaker_types.Coordinate

	// en: Optional. The x coordinate where to start clipping
	SX iotmaker_types.Coordinate

	// en: Optional. The y coordinate where to start clipping
	SY iotmaker_types.Coordinate

	// en: Optional. The width of the clipped image
	SWidth iotmaker_types.Coordinate

	// en: Optional. The height of the clipped image
	SHeight iotmaker_types.Coordinate

	// en: Optional. The width of the image to use (stretch or reduce the image)
	Width iotmaker_types.Coordinate

	// en: Optional. The height of the image to use (stretch or reduce the image)
	Height iotmaker_types.Coordinate
}

type Element 

type Element struct {
	SelfElement js.Value
	Document
}

func (*Element) AppendElementToDocumentBody 

func (el *Element) AppendElementToDocumentBody()

func (*Element) Create 

func (el *Element) Create(name, id string) js.Value

func (*Element) Get 

func (el *Element) Get() js.Value

func (*Element) InitializeDocument 

func (el *Element) InitializeDocument()

func (*Element) InitializeExistentElementById 

func (el *Element) InitializeExistentElementById(id string)

func (*Element) NewCanvas 

func (el *Element) NewCanvas(id string) js.Value

type Font 

type Font struct {
	// en: Specifies the font style.
	Style CanvasFontStyleRule

	// en: Specifies the font variant.
	Variant CanvasFontVariantRule

	// en: Specifies the font weight.
	Weight CanvasFontWeightRule

	// en: Specifies the font size and the line-height, in pixels
	Size iotmaker_types.Coordinate

	// en: Specifies the font family
	Family string

	// en: Use the font captioned controls (like buttons, drop-downs, etc.)
	Caption string

	// en: 	Use the font used to label icons
	Icon string

	// en: Use the font used in menus (drop-down menus and menu lists)
	Menu string

	// en: Use the font used in dialog boxes
	MessageBox string

	// en: Use the font used for labeling small controls
	SmallCaption string

	// en: Use the fonts used in window status bar
	StatusBar string
}

func (*Font) String 

func (el *Font) String() string

type Platform 

type Platform struct {
	Document
}

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.