🖌️Drawing API

Drawing api

Mayo GL provides a lot of apis to draw to the canvas, from simple to complex.

All of the functions take a object inside which all of the options are stored

rect()

Draws a rectangle

name	alternatives	descriptions	default value
x		the x position	0
y		the y position	0
width	w	the width	0
height	h	the height	0
scale	s/ size	the scale of the rectangle	1
color	c /fill /colour	the fill colour of the rectangle	#000

circle()

Draws a circle

name	alternatives	descriptions	default value
x		the x position	0
y		the y position	0
radius	r/ rad/ radii	the width	0
scale	s/ size	the scale of the circle	1
color	c /fill /colour	the fill colour of the circle	#000

setPixel()

Draws a single pixel in the selected area

name	alternatives	descriptions	default value
x		the x position	0
y		the y position	0
color	c /fill /colour	the colour of the pixel	#000

line()

Draws a line

name	alternatives	descriptions	default value
x1	x	the x position of the start	0
y1	y	the y position of the start	0
x2		the x position of the end	0
y2		the y position of the end	0
width	w	the width of the line	1
scale	s/ size	the scale of the line	1
color	c /fill /colour	the colour of the line	#000

text()

Draws text

name	alternatives	descriptions	default value
x		the x position	0
y		the y position	0
font		the font styling used to draw the text	12px sans-serif
text	t/ string/ str	the height
scale	s/ size	the scale of the text	1
color	c /fill /colour	the colour oft the text	#000

polygon()

Draws a customized polygon

name	alternatives	descriptions	default value
x		the x position	0
y		the y position	0
points	p/ vertices/ vert	each vertex in the shape (json object with x and y: {x: Number, y: Number})	[]
scale	s/ size	the scale of the polygon	1
color	c /fill /colour	the fill colour of the polygon	#000

example:

display.polygon(
    {
        x:50,
        y:50,
        points:[
            {
                x:0,
                y:0
            },{
                x:0,
                y:50
            },{
                x:35,
                y:35
            },{
                x:50,
                y:0
            },{
                x:0,
                y:0
            }
        ]
    }
)

texture()

Draws a rectangle

name	alternatives	descriptions	default value
x		the x position	0
y		the y position	0
width	w	the width	0
height	h	the height	0
scale	s/ size	the scale of the image	1
image	i /img /texture /sprite	The image object	null