# Drawing Graphics in PDF

Learn how to draw graphics using Wijmo's PDF module in this tutorial

## Content


## Concept
__PdfDocument__ provides a vector graphics API. The user uses a series of a drawing methods (such as __moveTo__, __lineTo__, __rect__) to construct a graphics path that can be filled, stroked or clipped by using the __stroke__, __fill__, __fillAndStroke__ or __clip__ methods.

Each of the drawing areas (such as header, body and footer) has the paths property represented by __PdfPaths__ class which provides methods for creating graphics paths and drawing them or using them for clipping. All drawing methods are chainable.

For example, the following code draws a line and a rectangle:
```javascript
import * as wjPdf from '@mescius/wijmo.pdf';

doc.paths
    .moveTo(0, 0)
    .lineTo(30, 30)
    .rect(30, 30, 50, 50)
    .stroke();
```

## Brushes and Pens
A pen is used to draw lines and outlined paths. A brush is used to fill closed paths, such as circle or rectangle.

A pen is an instance of the __PdfPen__ class, while a brush is an instance of any class that derives from the abstract __PdfBrush__ class. __PdfDocument__ provides several brush classes: __PdfSolidBrush__, __PdfLinearGradientBrush__, __PdfRadialGradientBrush__.

## Filling and Stroking a Path
To stroke a path, the __stroke__ method with a pen passed in should be called after the path construction is done. To fill a path, the __fill__ method with a brush passed in should be called after the path construction is done. To fill and stroke a closed path simultaneously, the __fillAndStroke__ method should be used.

For example, the following code fills a 10x10 rectangle with a red brush:
```javascript
doc.paths.rect(0, 0, 10, 10).fill(new wjPdf.PdfSolidBrush("#ff0000"));
```
If the pen/brush argument is omitted, the default document pen/brush will be used. Those can be changed by the document's setPen and setBrush methods:

```javascript
doc.setBrush(new wjPdf.PdfSolidBrush("#ff0000"));
doc.paths.rect(0, 0, 10, 10).fill();
```

All of these methods also accept __wijmo.Color__ or any string accepted by the __wijmo.Color.fromString__ method as a shortcut equivalent of the __PdfPen__ and PdfSolidBrush class instances. The following lines are equivalent:

```javascript
doc.paths.stroke(new wjPdf.PdfPen("#ff0000");
doc.paths.stroke(wijmo.Color.fromRgba(255, 0, 0));
doc.paths.stroke("#ff0000");

doc.paths.fill(new wjPdf.PdfSolidBrush("#ff0000");
doc.paths.fill(wijmo.Color.fromRgba(255, 0, 0));
doc.paths.fill("#ff0000");
```

## Clipping a Path
To clip a path, the path construction should be finished with the __clip__ method. Any subsequent drawing that falls outside the clipping path will be hidden.

```javascript
doc.paths.circle(100, 100, 50).clip();
```

## Transformations
Also, drawing area provides a number of transformation methods used to change the size or orientation of the path or transfer it from one coordinate space to another, such as __rotate__, __translate__, __scale__.

The following code scales a rectangle by a factor of 2:
```javascript
doc.scale(2);
doc.paths.rect(0, 0, 50, 50).stroke();
```

## Saving and Restoring the Graphics State
The graphics state is a snapshot of the default document pen, brush and transformations that have been currently applied.

The __saveState__ method creates a copy of the graphics state and pushes it onto stack. The __restoreState__ method restores the graphics state to its original value by popping it from the stack.

For example, you can call __saveState__, change the document pen, stroke some paths using it, then call __restoreState__ to restore the document pen to its former value. Also, this approach is very useful if a series of drawing methods with transformations or clipping applied should be isolated from the other drawings.

Here, the scaling transformation has been placed between the __saveState__ and restoreState methods so, it will not affect any drawings below the __restoreState__ method call:
```javascript
doc.saveState();

doc.scale(2);
doc.paths.rect(0, 0, 50, 50).stroke();

doc.restoreState();
```