Example for transform and setTransform

by Bacher

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations -->

<canvas id="canvas" width="200" height="250"></canvas>

JavaScript

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  
  ctx.translate(100, 100);

  ctx.fillStyle = '#f00';
  ctx.fillRect(0, 0, 100, 10);
  
  ctx.transform(0.1, 0.8, 0.5, 1.2, 0, 0);
  
  ctx.fillStyle = '#0f0';
  ctx.fillRect(0, 0, 50, 50);
  
  // ctx.setTransform(-1, 0, 0, 1, 100, 100);
  // ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
  // ctx.fillRect(0, 50, 100, 100);
}
draw();