---
title: "Configuring CanvasViewer Control"
canonical: https://www.graphicsmill.com/docs/gmwc/configuring-canvasviewer-control.htm
archived: true
applies_to:
  - product: "Graphics Mill Web Controls"
---

**You’re viewing documentation for an outdated product.** Graphics Mill Web Controls is no longer part of Graphics Mill. For current design editing and rendering tools, see [Design Atoms .NET](https://customerscanvas.com/docs/on-premises/design-atoms-cs/), [Design Atoms JS](https://customerscanvas.com/docs/on-premises/design-atoms-js/), and [Design Editor](https://customerscanvas.com/docs/on-premises/design-editor/).

# Configuring CanvasViewer Control

**Applies to:** Graphics Mill Web Controls · **Archived documentation**
 
**Note** 
You can refer to the web-to-print solution based on AJAX Vector Objects, [Customer's Canvas](https://www.graphicsmill.com/docs/gmwc/customers-canvas.htm.md "Customer's Canvas"). You can consider it as a ready-to-use editor that you may want to embed into your website or as an example demonstrating how AJAX Vector Objects can be used for your needs.
 
Here we will discuss how to configure the appearance of the following elements:
 
- Colors of the background and border of [CanvasViewer](https://www.graphicsmill.com/docs/gmwc/T_Aurigma_GraphicsMill_AjaxControls_CanvasViewer.htm.md)
- Scrollbars
- Rulers
- Grid and safety lines
- Grips and selection frame.

## Configuring CanvasViewer Colors
  
As CanvasViewer is an ASP.NET control, its color settings are only adjusted on the server side. You can change the background and border colors of CanvasViewer via the [BackColor↗](http://msdn2.microsoft.com/en-us/library/tstx4c33) and **RectangleVObject.BorderColor** properties, respectively. The following snippet demonstrates how to perform this:
 
```csharp
CanvasViewer1.BackColor = System.Drawing.Color.Azure;
CanvasViewer1.BorderColor = System.Drawing.Color.Blue;
```
 
When the content becomes less than the viewport, the CanvasViewer background will be filled with the color blue as shown on the picture below. If you are not familiar with these concepts, read the [Canvas and CanvasViewer Control](https://www.graphicsmill.com/docs/gmwc/canvas-and-canvasviewer-control.htm.md) topic.
 ![CanvasViewer Colors Configuring](https://www.graphicsmill.com/docs/gmwc/ConfiguringCanvasViewer1.png)
 
## Configuring Scrollbars
  
Scrollbars are elements of CanvasViewer, therefore they can be configured only on the server side. However, if the scrollbars are enabled, AJAX Vector Objects allows you to specify the position of the sliders on both sides. First, here is how to enable the scrollbars. There are two modes of displaying scrollbars specified via the [ScrollBarsStyle](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_ScrollBarsStyle.htm.md) property: **Always** when scrollbars are always shown and **Auto** when scrollbars are automatically hidden if the content becomes bigger than the viewport. The following snippet demonstrates how to set the scrollbars to the **Always** mode:
 
```csharp
CanvasViewer1.ScrollBarsStyle = ScrollBarsStyle.Always;
```
 
Now, for the position of the scrollbar sliders. The position of the sliders defines a visible area of the content in the viewport. The current positions of the sliders are specified via the [ScrollingPosition](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_ScrollingPosition.htm.md) property that works on both the client and server sides. The vertical slider can be moved in the range from 0 to ([ContentHeight](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_CanvasViewer_ContentHeight.htm.md) - [Height](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_Height.htm.md) + [ScrollBarWidth](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_ScrollBarWidth.htm.md)), while horizontal - from 0 to ([ContentWidth](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_CanvasViewer_ContentWidth.htm.md) - [Width](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_Width.htm.md) + **ScrollBarWidth**). The following snippets illustrate how to change the position of the sliders:
 
```csharp
CanvasViewer1.ScrollingPosition = new System.Drawing.Point(70, 70);
```
 
```
$find("<%= CanvasViewer1.ClientID %>").set_scrollingPosition(new Sys.UI.Point(70, 70));
```
 
## Configuring Rulers
  
Rulers are the bars displayed on the top and left sides of the CanvasViewer which are used as a reference in making measurements. Though the rulers are elements of CanvasViewer, AJAX Vector Objects allows you to configure the rulers both on the client and server sides. To enable the rulers just set the [RulerEnabled](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_RulerEnabled.htm.md) property to `true`. By default, the ruler dimension is represented in points. However, you can change it by specifying the ruler's scale via the [RulerScale](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_RulerScale.htm.md) property. For example, the following snippets demonstrate how to specify the ruler dimension in centimeters:
 
```csharp
//1 inch = 72 pt, 1 inch = 2.54 cm
CanvasViewer1.RulerScale = 2.54f / 72.0f;
```
 
```
$find("<%= CanvasViewer1.ClientID %>").set_rulerScale(2.54 / 72.0);
```
 
The rulers measure the width and height of CanvasViewer starting from zero by default. You can change the starting positions using the [RulerOffsetX](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_RulerOffsetX.htm.md) and [RulerOffsetY](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_RulerOffsetY.htm.md) properties for the vertical and horizontal rulers, respectively. The following snippets show how to move the rulers to `50`:
 
```csharp
CanvasViewer1.RulerOffsetX = -50;
CanvasViewer1.RulerOffsetY = -50;
```
 
```
$find("<%= CanvasViewer1.ClientID %>").set_rulerOffsetX(-50);
$find("<%= CanvasViewer1.ClientID %>").set_rulerOffsetY(-50);
```
 
After launching any of these snippets, you will get the following result:
 ![Rulers Configuring](https://www.graphicsmill.com/docs/gmwc/ConfiguringCanvasViewer2.png)
 
## Configuring Grid
  
The grid becomes very helpful when you need to position objects on Canvas precisely or symmetrically. AJAX Vector Objects provides [GridVObject](https://www.graphicsmill.com/docs/gmwc/T_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject.htm.md) that appears as the grid on the workspace. As the grid serves only to help the users to locate objects, **GridVObject** is locked so that they cannot change it using the mouse or keyboard.
 
Configuring the grid, you can specify how many horizontal and vertical grid lines you want to draw on Canvas via the [Cols](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject_Cols.htm.md) and [Rows](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject_Rows.htm.md) properties. You can also change spacing between grid lines specifying the [StepX](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject_StepX.htm.md) and [StepY](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject_StepY.htm.md) properties in points. In addition, you can adjust the width of the grid lines using the [LineWidth](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject_LineWidth.htm.md) property, wherein this property is specified in pixels if the [FixedLineWidth](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject_FixedLineWidth.htm.md) property is set to `true`. Otherwise, **LineWidth** is in points.
 
The following snippets demonstrate how to create the grid:
 
```csharp
int step = 15;
var grid = new GridVObject(){
    StepX = step,
    StepY = step,
    Cols = Convert.ToInt32(CanvasViewer1.Canvas.WorkspaceWidth / step),
    Rows = Convert.ToInt32(CanvasViewer1.Canvas.WorkspaceHeight / step),
    LineWidth = 0.5f,
    FixedLineWidth = true
};
CanvasViewer1.Canvas.Layers[0].VObjects.Add(grid);
```
 
```
var canvas = $find("<%= CanvasViewer1.ClientID %>").get_canvas();
var step = 15;
var grid = new Aurigma.GraphicsMill.AjaxControls.VectorObjects.GridVObject(
    0, 0, canvas.get_workspaceWidth(), canvas.get_workspaceHeight(), step, step);
grid.set_lineWidth(0.5);
grid.set_fixedLineWidth(true);
grid.set_lineColor("#808080");
canvas.get_layers().get_item(0).get_vObjects().add(grid);
```
 
After launching these snippets, you will get the following view:
 ![Grid Configuring](https://www.graphicsmill.com/docs/gmwc/ConfiguringCanvasViewer3.png) 
**Note** 
Remember that AJAX Vector Objects will not hide the grid automatically when it renders the resulting image. If you need to hide **GridVObject**, set the [Visible](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_VObject_Visible.htm.md) property to `false` before rendering.
 
## Configuring Safety Lines
  
All printed products are cut out during the fulfillment process. Safety lines are special lines displayed on the design. If an object is located inside the safe area bordered by the safety lines, they will prevent the object from getting cut off. Therefore, adding the safety lines to Canvas is important and it helps users to make sure that important information will remain on the product after being printed.
 
As a rule, the safety lines are dashed lines drawn 1/4'' (18 points) inside the product on each side. For creating the safety lines, you draw four dashed lines using [DashedLineVObject](https://www.graphicsmill.com/docs/gmwc/T_Aurigma_GraphicsMill_AjaxControls_VectorObjects_DashedLineVObject.htm.md). This object allows you to adjust such line settings as the gap between dashes via the [AltDashWidth](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_DashedLineVObject_AltDashWidth.htm.md) property, the dash width via the [DashWidth](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_DashedLineVObject_DashWidth.htm.md) property, and the line width via the [Width](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_VectorObjects_LineVObject_Width.htm.md) property.
 
The following snippets demonstrate how to create the safety lines:
 
```csharp
int dash = 10, trimming = 18;
Func<PointF, PointF, DashedLineVObject> createDashedLine = (p1, p2) => new DashedLineVObject(p1, p2)
{
    AltDashWidth = dash,
    DashWidth = dash,
    Width = 0.5f,
    Color = System.Drawing.Color.Red
};
var dashedLines = new List<DashedLineVObject>();
dashedLines.Add(createDashedLine(new PointF(trimming, trimming), new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, trimming)));
dashedLines.Add(createDashedLine(new PointF(trimming, trimming), new PointF(trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming)));
dashedLines.Add(createDashedLine(new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, trimming),
    new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming)));
dashedLines.Add(createDashedLine(new PointF(trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming),
    new PointF(CanvasViewer1.Canvas.WorkspaceWidth - trimming, CanvasViewer1.Canvas.WorkspaceHeight - trimming)));
foreach (var line in dashedLines)
    CanvasViewer1.Canvas.Layers[0].VObjects.Add(line);
```
 
```
var settings = function (vObject) {
    var dash = 10;
    vObject.set_altDashWidth(dash);
    vObject.set_dashWidth(dash),
    vObject.set_width(0.5),
    vObject.set_color("#FF0000");
    return vObject;}

var canvas = $find("<%= CanvasViewer1.ClientID %>").get_canvas();
var trimming = 18;
var safetyLines = [new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(trimming, 
        trimming, canvas.get_workspaceWidth() - trimming, trimming),
    new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(trimming, 
        trimming, trimming, canvas.get_workspaceHeight() - trimming),
    new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(canvas.get_workspaceWidth() - trimming, 
        trimming, canvas.get_workspaceWidth() - trimming, canvas.get_workspaceHeight() - trimming),
    new Aurigma.GraphicsMill.AjaxControls.VectorObjects.DashedLineVObject(trimming, 
        canvas.get_workspaceHeight() - trimming, canvas.get_workspaceWidth() - trimming, canvas.get_workspaceHeight() - trimming)];
safetyLines.forEach(function (entry) {
     canvas.get_layers().get_item(0).get_vObjects().add(settings(entry));} );
```
 
These snippets produce the same result:
 ![Safety Lines Configuring](https://www.graphicsmill.com/docs/gmwc/ConfiguringCanvasViewer4.png)
 
## Configuring Grips and Selection Frame
  
As we discussed in the [Layers and Objects](https://www.graphicsmill.com/docs/gmwc/layers-and-objects-api.htm.md) topic, a current object is the currently selected object on Canvas that has a special selection frame delineating it, and control grips allowing a user to rotate or resize it. By default, the current object looks as follows:
 ![The Current Object](https://www.graphicsmill.com/docs/gmwc/ConfiguringCanvasViewer5.png) 
AJAX Vector Objects allows you to configure the grips and selection frame by changing their color and size. The following snippets demonstrate usage of all properties that affect the grips and selection:
 
```csharp
CanvasViewer1.Canvas.RotationGripColor = Color.FromGdiPlusColor(System.Drawing.Color.Yellow);
CanvasViewer1.Canvas.RotationGripSize = 10;

CanvasViewer1.Canvas.RotationGripLineColor = Color.FromGdiPlusColor(System.Drawing.Color.Green);
CanvasViewer1.Canvas.RotationGripLineLength = 15;

CanvasViewer1.Canvas.SelectionColor = Color.FromGdiPlusColor(System.Drawing.Color.Green);
CanvasViewer1.Canvas.SelectionWidth = 4;

CanvasViewer1.Canvas.ResizeGripLineColor = Color.FromGdiPlusColor(System.Drawing.Color.Gold);

CanvasViewer1.Canvas.ResizeGripColor = Color.FromGdiPlusColor(System.Drawing.Color.Yellow);
CanvasViewer1.Canvas.ResizeGripSize = 4;
```
 
```
var canvas = $find("<%= CanvasViewer1.ClientID %>").get_canvas();
canvas.set_rotationGripColor("#FFFF00");
canvas.set_rotationGripSize(10);

canvas.set_rotationGripLineColor("#008000");
canvas.set_rotationGripLineLength(15);

canvas.set_selectionColor("#008000");
canvas.set_selectionWidth(4);

canvas.set_resizeGripLineColor("#FFD700");

canvas.set_resizeGripColor("#FFFF00");
canvas.set_resizeGripSize(4);
```
 
After launching any of these snippets, the current object will look as follows:
 ![The Current Object](https://www.graphicsmill.com/docs/gmwc/ConfiguringCanvasViewer6.png)
 
## See Also
  
### Reference
 
- [ScrollBarsStyle Property](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_ScrollBarsStyle.htm.md)
- [ScrollingPosition Property](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_ScrollingPosition.htm.md)
- [RulerEnabled Property](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_RulerEnabled.htm.md)
- [RulerScale Property](https://www.graphicsmill.com/docs/gmwc/P_Aurigma_GraphicsMill_AjaxControls_BaseViewer_RulerScale.htm.md)
- [GridVObject Class](https://www.graphicsmill.com/docs/gmwc/T_Aurigma_GraphicsMill_AjaxControls_VectorObjects_GridVObject.htm.md)
- [DashedLineVObject Class](https://www.graphicsmill.com/docs/gmwc/T_Aurigma_GraphicsMill_AjaxControls_VectorObjects_DashedLineVObject.htm.md)

### Manual
 
- [Canvas and CanvasViewer Control](https://www.graphicsmill.com/docs/gmwc/canvas-and-canvasviewer-control.htm.md)
- [Layers and Objects](https://www.graphicsmill.com/docs/gmwc/layers-and-objects-api.htm.md)