Home › All functions › Canvas
Canvas Simulation Instrument Studio 1
canvas_add Simulation Instrument Studio 1
Overloads canvas_add(x, y, width, height, draw_callback)Creates a drawing surface. The callback runs whenever the canvas is painted.
Parameters # Name Type Description 1 x Number This is the most left point of the canvas. 2 y Number This is the most top point of the canvas. 3 width Number The canvas width in pixels. 4 height Number The canvas height in pixels. 5 draw_callback Function (Optional) This function will be called on a redraw of the canvas. It should contain the individual draw functions like _line_to, _arc, etc. The initial width and height of the canvas are provided to the callback function (from AM/).
Example -- Horizon. The callback runs every time we ask for a redraw.
horizon = canvas_add (20 , 20 , 200 , 200 , function ()
_rect (0 , 0 , 200 , 100 )
_fill ("#3a82c4" )
_rect (0 , 100 , 200 , 100 )
_fill ("#6b4f2a" )
end)Example: a slip ball slip = canvas_add (80 , 170 , 80 , 24 , function ()
_rect (0 , 8 , 80 , 8 )
_fill ("#2a3036" )
_circle (40 , 12 , 6 )
_fill ("white" )
end)Photo slot: shots/canvas_add.png canvas_draw Simulation Instrument Studio 1
Overloads canvas_draw(canvas_id, draw_callback)Paints the canvas again, now.
Parameters # Name Type Description 1 canvas_id String The is the reference to the canvas. You can get this reference from the canvas_add function. 2 draw_callback Function Optional. This function will be called on a redraw of the canvas. It should contain the individual draw functions like _line_to, _rect, etc. The initial width and height of the canvas are provided to the callback function (from AM/).
Example -- Pitch changed. Paint the horizon again.
canvas_draw (horizon)Photo slot: shots/canvas_draw.png _arc Simulation Instrument Studio 1
Overloads _arc(cx, cy, start_angle, end_angle, radius, direction)Adds an arc to the current path.
Parameters # Name Type Description 1 cx Number This is the left pixel of the control point. 2 cy Number This is the top pixel of the control point. 3 start_angle Number The starting angle, in degrees (0 is at the 3 o'clock position of the arc's circle) 4 end_angle Number The ending angle, in degrees 5 radius Number Radius of the arc in pixels 6 direction Boolean (Optional) true = clockwise, false = counterclockwise
Example -- Drawn on the attitude canvas
_arc (20 , 20 )Photo slot: shots/_arc.png _arc_to Simulation Instrument Studio 1
Overloads _arc_to(cpx, cpy, x, y, radius)Adds an arc from the pen to a point.
Parameters # Name Type Description 1 cpx Number This is the left pixel of the control point. 2 cpy Number This is the top pixel of the control point. 3 x Number This is the left pixel of the canvas where the end of your line should be. 4 y Number This is the top pixel of the canvas where the end of your line should be. 5 radius Number Radius of the arc in pixels
Example -- Drawn on the attitude canvas
_arc_to (20 , 20 )Photo slot: shots/_arc_to.png _bezier_to Simulation Instrument Studio 1
Overloads _bezier_to(cp1x, cp1y, cp2x, cp2y, x, y)Adds a cubic curve from the pen to a point.
Parameters # Name Type Description 1 cp1x Number This is the left pixel of the first control point. 2 cp1y Number This is the top pixel of the first control point. 3 cp2x Number This is the left pixel of the second control point. 4 cp2y Number This is the top pixel of the second control point. 5 x Number This is the left pixel of the canvas where the end of your line should be. 6 y Number This is the top pixel of the canvas where the end of your line should be.
Example -- Drawn on the attitude canvas
_bezier_to (20 , 20 )Photo slot: shots/_bezier_to.png _circle Simulation Instrument Studio 1
Overloads _circle(cx, cy, radius)Adds a circle to the current path.
Parameters # Name Type Description 1 cx Number Left point of the center of the circle. 2 cy Number Top point of the center of the circle. 3 radius Number Radius of the circle in pixels.
Example -- A slip ball
_circle (100 , 160 , 8 )
_fill ("white" )Photo slot: shots/_circle.png _ellipse Simulation Instrument Studio 1
Overloads _ellipse(cx, cy, radius_x, radius_y)Adds an ellipse to the current path.
Parameters # Name Type Description 1 cx Number Left point of the center of the ellipse. 2 cy Number Top point of the center of the ellipse. 3 radius_x Number Horizontal radius of the ellipse in pixels. 4 radius_y Number Vertical radius of the ellipse in pixels.
Example -- Drawn on the attitude canvas
_ellipse (20 , 20 )Photo slot: shots/_ellipse.png _fill Simulation Instrument Studio 1
Overloads _fill(color)
_fill(color, opacity)
_fill(r, g, b)
_fill(r, g, b, opacity)Fills the queued path.
Parameters # Name Type Description 1 color Multiple The color of the line. Can be RGBA hex string ('#FF0000FF'), the name of the color ('red') or separate number (1, 0, 0, 1).
Example _rect (0 , 0 , 200 , 100 )
_fill ("#3a82c4" )Photo slot: shots/_fill.png _fill_gradient_box Simulation Instrument Studio 1
Overloads _fill_gradient_box(x, y, width, height, corner, feather, color_inner, color_outer)Fills the queued path with a box gradient.
Parameters # Name Type Description 1 x Number X position of the box in pixels 2 y Number Y position of the box in pixels. 3 width Number Width of the box in pixels. 4 height Number Height of the box in pixels 5 corner Number Corner radius in pixels. 6 feather Number Feather, this determines the blurring effect. 7 color_inner Color The color at point 1. Can be RGBA hex string ( 8 color_outer Color The color at point 2. Can be RGBA hex string (
Example -- Drawn on the attitude canvas
_fill_gradient_box (20 , 20 )Photo slot: shots/_fill_gradient_box.png _fill_gradient_linear Simulation Instrument Studio 1
Overloads _fill_gradient_linear(x1, y1, x2, y2, color_1, color_2)Fills the queued path with a linear gradient.
Parameters # Name Type Description 1 x1 Number X position of point 1 in pixels. 2 y1 Number Y position of point 1 in pixels. 3 x2 Number X position of point 2 in pixels. 4 y2 Number Y position of point 2 in pixels. 5 color_1 Color The color at point 1. Can be RGBA hex string ( 6 color_2 Color The color at point 2. Can be RGBA hex string (
Example -- Drawn on the attitude canvas
_fill_gradient_linear (20 , 20 )Photo slot: shots/_fill_gradient_linear.png _fill_gradient_radial Simulation Instrument Studio 1
Overloads _fill_gradient_radial(x, y, radius_inner, radius_outer, color_inner, color_outer)Fills the queued path with a radial gradient.
Parameters # Name Type Description 1 x Number X position of the center of the circle 2 y Number Y position of the center of the circle 3 radius_inner Number Radius of inner color 4 radius_outer Number Radius of outer color 5 color_inner Color The color at point 1. Can be RGBA hex string ( 6 color_outer Color The color at point 2. Can be RGBA hex string (
Example -- Drawn on the attitude canvas
_fill_gradient_radial (20 , 20 )Photo slot: shots/_fill_gradient_radial.png _fill_img Simulation Instrument Studio 1
Overloads _fill_img(file_name, x, y, width, height)
_fill_img(file_name, x, y, width, height, opacity)Fills the queued path with an image.
Parameters # Name Type Description 1 file_name String File name of the image within the resource folder. Only PNG files are supported. 2 x Number X offset in pixels 3 y Number Y offset in pixels 4 width Number The width of the rendered image 5 height Number The height of the rendered image 6 opacity Number (Optional) The opacity in which the image should be drawn. Ranges from 0.0 (invisible) to 1.0 (completely visible).
Example -- Drawn on the attitude canvas
_fill_img (20 , 20 )Photo slot: shots/_fill_img.png _hole Simulation Instrument Studio 1
Overloads _hole()The next shape is a hole in the fill.
Example -- Drawn on the attitude canvas
_hole (20 , 20 )Photo slot: shots/_hole.png _line_to Simulation Instrument Studio 1
Overloads _line_to(x, y)Draws a line from the pen to a point.
Parameters # Name Type Description 1 x Number This is the left pixel of the canvas where the end of your line should be. 2 y Number This is the top pixel of the canvas where the end of your line should be.
Example _move_to (20 , 100 )
_line_to (180 , 100 )
_stroke ("#f2f4f6" , 1 )Photo slot: shots/_line_to.png _move_to Simulation Instrument Studio 1
Overloads _move_to(x, y)Moves the pen without drawing.
Parameters # Name Type Description 1 x Number This is the left pixel of the canvas where your pen go. 2 y Number This is the top pixel of the canvas where your pen go.
Example -- Start the horizon line
_move_to (0 , 100 )Photo slot: shots/_move_to.png _quad_to Simulation Instrument Studio 1
Overloads _quad_to(cp1, cp1y, cp2x, cp2y, x, y)Adds a quadratic curve from the pen to a point.
Parameters # Name Type Description 1 cpx Number This is the left pixel of the control point. 2 cpy Number This is the top pixel of the control point. 3 x Number This is the left pixel of the canvas where the end of your line should be. 4 y Number This is the top pixel of the canvas where the end of your line should be.
Example -- Drawn on the attitude canvas
_quad_to (20 , 20 )Photo slot: shots/_quad_to.png _rect Simulation Instrument Studio 1
Overloads _rect(x, y, width, height)
_rect(x, y, width, height, all_corners)
_rect(x, y, width, height, top_left_corner, top_right_corner, bottom_left_corner, bottom_right_corner)Adds a rectangle to the current path.
Parameters # Name Type Description 1 x Number Left point of the rectangle. 2 y Number Top point of the rectangle. 3 width Number Width of the rectangle. 4 heigth Number Height of the rectangle. 5 corner Number (Optional) Radius of arcs on every corner of the rectangle, use if you want rounded corners. 5 top_left_corner Number (Optional) Radius of arcs on top left corner of the rectangle, use if you want rounded corners. 6 top_right_corner Number (Optional) Radius of arcs on top right corner of the rectangle, use if you want rounded corners. 7 bottom_left_corner Number (Optional) Radius of arcs on bottom left corner of the rectangle, use if you want rounded corners. 8 bottom_right_corner Number (Optional) Radius of arcs on bottom right corner of the rectangle, use if you want rounded corners.
Example -- Sky over brown, the attitude ground
_rect (0 , 100 , 200 , 100 )
_fill ("#6b4f2a" )Photo slot: shots/_rect.png _rotate Simulation Instrument Studio 1
Overloads _rotate(angle)
_rotate(angle, anchor_x, anchor_y)Rotates later drawing, in canvas pixels.
Parameters # Name Type Description 1 angle Number Angle of rotation in degrees. 2 anchor_x Number (Optional) Left point of the anchor point to rotate around 3 anchor_y Number (Optional) Top point of the anchor point to rotate around
Example -- Drawn on the attitude canvas
_rotate (20 , 20 )Photo slot: shots/_rotate.png _scale Simulation Instrument Studio 1
Overloads _scale(x, y)Scales later drawing.
Parameters # Name Type Description 1 x Number X axle scaling 2 y Number Y axle scaling
Example -- Drawn on the attitude canvas
_scale (20 , 20 )Photo slot: shots/_scale.png _solid Simulation Instrument Studio 1
Overloads _solid()The next shape is solid, not a hole.
Example -- Drawn on the attitude canvas
_solid (20 , 20 )Photo slot: shots/_solid.png _stroke Simulation Instrument Studio 1
Overloads _stroke(color_name, line_width)
_stroke(color_name, opacity, line_width)
_stroke(color_hex, line_width)
_stroke(r, g, b, line_width)
_stroke(r, g, b, a, line_width)Strokes the queued path.
Parameters # Name Type Description 1 color Multiple The color of the line. Can be RGBA hex string ( 2 line_width Number The width of the line in pixels.
Example -- Lubber line
_move_to (100 , 10 )
_line_to (100 , 28 )
_stroke ("white" , 2 )Photo slot: shots/_stroke.png _translate Simulation Instrument Studio 1
Overloads _translate(x, y)Moves later drawing.
Parameters # Name Type Description 1 x Number X position 2 y Number Y position
Example -- Drawn on the attitude canvas
_translate (20 , 20 )Photo slot: shots/_translate.png _triangle Simulation Instrument Studio 1
Overloads _triangle(x1, y1, x2, y2, x3, y3)Adds a triangle to the current path.
Parameters # Name Type Description 1 x1 Number Left point of the first corner of the triangle 2 y1 Number Top point of the first corner of the triangle 3 x2 Number Left point of the second corner of the triangle 4 y2 Number Top point of the second corner of the triangle 5 x3 Number Left point of the third corner of the triangle 6 y3 Number Top point of the third corner of the triangle
Example -- Drawn on the attitude canvas
_triangle (20 , 20 )Photo slot: shots/_triangle.png _txt Simulation Instrument Studio 1
Overloads _txt(text, style, x, y)
_txt(text, style, x, y, opacity)Draws text on the canvas.
Parameters # Name Type Description 1 txt String This is the txt being shown 2 style String The style to use. See txt_add for style arguments. 3 x Number This is the most left point of the canvas where your text should be shown. 4 y Number This is the most top point of the canvas where your text should be shown. 5 opacity Number (Optional) The opacity in which the text should be drawn. Ranges from 0.0 (invisible) to 1.0 (completely visible).
Example _txt ("ALT" , "size:12; color:white;" , 8 , 8 )Photo slot: shots/_txt.png 
