应用旋转时，HTML5 画布剪辑()在 Chrome 中不起作用

I'm trying to use a clip region on a canvas and it stops working as soon as the coordinate system is rotated by any non zero value:

   window.onload = function() {
      var canvas = document.getElementById("mainCanvas");
      var ctx = canvas.getContext("2d");

      ctx.rotate(Math.PI / 8); // !!! Clipping doesn't work with any non zero value

      ctx.beginPath();
      ctx.rect(0, 0, canvas.width, canvas.height);
      ctx.stroke();
      ctx.clip(); // !!! Image below is invisible in Chrome when clip() is enabled
      
      var objectImage = document.getElementById("test");
      ctx.drawImage(objectImage, 0, 0);
   }

<canvas id="mainCanvas" width="320" height="240" style = "border:1px solid #d3d3d3;"></canvas>
<img id="test" width="0" height="0" src="https://dl.dropboxusercontent.com/u/4111969/test.png">

代码在 Firefox 中运行良好: