# Canvas

The `Canvas` is a control which can be used to draw graphics via scripting. This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Drawing

The Wisej.NET `Canvas` control implements all the same properties and methods as the JavaScript [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) control. You can use methods like `LineTo()`, `FillRect()`, and `FillText()` to draw directly on the control in the browser.

![Interactive drawing demonstration using Canvas control](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-1d2425f4a90ce88de2bb381dfe386354533cd8ba%2FCanvasDrawing.gif?alt=media)

{% hint style="info" %}
You must still call `BeginPath()` and `Stroke()` to draw lines. See <https://www.w3schools.com/tags/canvas_lineto.asp>.
{% endhint %}

## How To

### Draw a Line

You can draw a line with the `Wisej.Web.Canvas` control the same way you would a JavaScript Canvas element:

Note that all drawing must be done inside of the Canvas's Redraw event.

{% tabs %}
{% tab title="C#" %}

<pre class="language-csharp"><code class="lang-csharp">private void canvas1_Redraw(object sender, EventArgs e)
{
<strong>    canvas1.BeginPath();
</strong>    canvas1.MoveTo(0, 0);
    canvas1.LineTo(100, 100);
    canvas1.StrokeStyle = Color.Red;
    canvas1.Stroke();
}
</code></pre>

{% endtab %}
{% endtabs %}

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                           |
| ---------------- | --------------------------------------------------------------------------------------------------------------------- |
| Class name       | wisej.web.Canvas                                                                                                      |
| Theme appearance | "canvas", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                 |
| Child components | "canvas" is the HTML5 canvas element. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)   |