# Tutorials ## Quick start guide This tutorial covers some basic usage to help getting started with lichartee. ### A Simple example Display of a five-point dotted red trace of the square function on a canvas at the end of a web page. ```js let manager = new Manager( document.getElementsByTagName('body')[0], ); manager.add_canvas(500, 500).figure.add_axes().plot( [0, 1, 2, 3, 4 , 5 ], [0, 1, 4, 9, 16, 25], { color: 'red' , style: 'dashed', } , ); manager.draw(); ``` The first instruction create a [Manager](references.md#manager) which can be used to manage one or more [Canvas](references.md#canvas). This manager is defined from the html `` tag, so each [Canvas](references.md#canvas) managed by this one will be at the end of this elements. The second instruction do a lot of things at once. First, the method [`add_canvas`](references.md#manager-add_canvas) add, like this name indicate, a [Canvas](references.md#canvas) with a specific width and height associated to the [Manager](references.md#manager) we created before. Next, the method [`add_axes`](references.md#figure-add_axes) of the [figure](references.md#canvas-figure) property of the canvas we created add an [Axes](references.md#axes) to this figure. Then, the [`plot`](references.md#axes-plot) method take the first list of number as the x coordinate of points, the second as y ones and finally, an optional dictionary which define the style of the plot composed of each point. Finally the [`draw`](references.md#manager-draw) method render the plot we created to display it on the created canvas in the web page.