# 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 `<body>` 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.