APIには、変換マトリックスを操作するメソッドが用意されています。setTransform()を通して、描画オブジェクトを変形させることができます。下記の例では、まず変更していないコンテキストの状態をsave()で保存し、translate()で描画の基準点をcanvasの中央に変更しています。次に基準点を中心に縦横100pxの正方形を描画した後、restore()でコンテキストを変更前の状態に戻しています。例のように、コンテキストに対する変形は、描画の前に記述する必要があります。rotate()rotate()は、引数で指定した角度に描画オブジェクトを回転させます。回転は基準点を中心に行われ、角度は時計回りのラジアン値で指定します。下記の例では、translate()で基準点をcanvasの中央に移動し、rotate()で時計回りに45度回転させてから、縦横100pxの正方形を描画しています。結果として、100pxの正方形が45度回転して、canvasの中央に描画されます。scale()scale()は、描画オブジェクトを伸縮させます。第1引数で水平方向の伸縮率、第2引数で垂直方向の伸縮率を指定します。下記の例では、translate()でcanvasの中央に移動、rotate()で時計回りに45度回転、scale()で水平方向に2倍、垂直方向に0.5倍の順番で処理させています。縦50pxの矩形が45度回転し、canvasの中央に描画されます。scale()による変形は処理の順序によって結果が異なります。コンテキストはrestore()されるまで、変換マトリックスの状態を維持するからです。2)と記述した場合、translate()による座標の移動量も指定した値の2倍になります。scale()といったメソッドは、変換マトリックスを簡易的に変更するためのメソッドです。これらの変更は、変換マトリックスを直接操作することで行うこともできます。transform()は、現在のコンテキストの変換マトリックスに引数で渡す行列を掛け合わせます。scale()の処理をそれぞれtransform()で書き直したものです。setTransform()setTransform()は、変換マトリックスを引数で渡した行列で差し替えます。変換マトリックスを操作することにより、矩形を平行四辺形に変形させることができます。下記の例では、引数の行列で水平方向の傾斜率として-1を指定することにより、正方形を水平方向に傾いた平行四辺形に変形させています。context.restore();};変換マトリックスによる変形のサンプル変換マトリックスによる簡単な変形のサンプルを作ってみました。canvas上でマウスを動かすとマウスのX座標に応じて、配置した画像が水平方向に傾いた平行四辺形に変形します。