# Canvas reference: The transform() function

Summary: The transform() function can be used to scale, skew and translate the canvas

[No canvas support]
An example of using the `transform()` function to skew the canvas The `transform()` function can be used to apply matrix transformations to the canvas. What does that mean in practice? It's a combination of scaling, skewing and translating. Of these, scaling can also be done with the `scale()` function, translating can be done with the `translate()` function but skewing (which is slanting the canvas at an angle) can only be done with the `transform()()` and `setTransform()()` functions. See the examples for how to use this function.

## Arguments to the function

• The scale factor(X direction)
• The skew factor (X axis)
• The skew factor (Y axis)
• The scale factor(Y direction)
• The translation (X direction)
• The translation (Y direction)

## An example of scaling your canvas up

This example uses the transform function (instead of the `scale()` function) to increase the size of the canvas.

```<script>
{
var canvas  = document.getElementById("cvs");
var context = canvas.getContext('2d');

context.transform(2,0,0,2,0,0);

var bar = new RGraph.Bar({
id: 'cvs',
data: [1,8,6,3,5]
}).draw();
}
</script>
```

## An example of skewing your canvas

This example uses the `transform()` function to skew the canvas.

```<script>
{
var canvas  = document.getElementById("cvs");
var context = canvas.getContext('2d');

context.transform(1,0.2,0.2,1,0,0);

var bar = new RGraph.Bar({
id: 'cvs',
data: [1,8,6,3,5]
}).draw();
}
</script>
```

## An example of translating your canvas

This example uses the `transform()` function (instead of the `translate()` function) to move the coordinate system of the canvas by 50 pixels in the X and Y directions.

```<script>