Canvas States and Transition

Reduce the time and effort in your drawings with transformations. There’s nothing you can’t draw on a canvas. However, creating intricate designs can be hard. The Canvas API tries to help by offering you a bunch of methods which, when used effectively, can drastically reduce the time and effort required to create such designs. In this screencast, I’m going to introduce you to those methods, and help you understand how to make the most of canvas states and transformations.

by Amrit Joyekurun

HTML

<canvas id="my_canvas" width="300" height="300" style=" border:solid gray 2px;"></canvas>

JavaScript

(function() {
  var myCanvas =
    document.getElementById("my_canvas");
  var context = myCanvas.getContext("2d");

  //context.translate(150,50);
  // context.rotate(10.Math.PI/180);
  // context.scale(2,2);

  context.fillStyle = "red";
  context.shadowBlur = 10;
  context.shadowColor = "black";
  context.save();
  context.fillRect(50, 50, 100, 50);

  context.fillStyle = "blue";
  context.shadowBlur = 5;
  context.shadowColor = "black";
  context.fillRect(50, 120, 100, 50);

  context.restore();
  context.fillRect(50, 190, 100, 50);

})();