Si lo que necesitamos es aplicar una transformación que incline un elemento dentro del canvas, también podemos usar el método transform(). Se puede aplicar una inclinación vertical, horizontal, o bien ambas.
El parámetro sx define la inclinación horizontal, mientras que sy define la inclinación vertical. Veamos un ejemplo:
<body>
<canvas id=”inclinar” width=”578” height=”200”></canvas>
<script>
var canvas = document.
getElementById(‘inclinar’);
var context = canvas.getContext(‘2d’);
var rectWidth = 150;
var rectHeight = 75;
// matriz de inclinacion:
// 1 sx 0
// sy 1 0
// 0 0 1
var sx = 0.75;
// Inclinacion horizontal .75 var sy = 0;
// sin inclinacion vertical
// Traslacion para centrar el canvas context.translate(canvas.width / 2, canvas. height / 2);
// Aplicar transformación personalizada context.transform(1, sy, sx, 1, 0, 0);
context.fillStyle = ‘blue’;
context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight);
</script>
</body>