transformで図形を傾けて表示
canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); //標準の四角形 ctx.strokeStyle = "red"; ctx.strokeRect(80, 50, 100, 60); //30度のラジアン生成 var rad = 30 * Math.PI / 180; // 右に45°回転する変換マトリックスを定義 ctx.setTransform(Math.cos(rad), Math.sin(rad), -Math.sin(rad), Math.cos(rad), 0, 0); //図形を描画 ctx.strokeStyle = "blue"; ctx.strokeRect(80, 50, 100, 60);