CreateJS: проблема при попытке использовать CSS-преобразование для поворота холста?

Question

var canvas = $('#canvas')[0]
var stage = new createjs.Stage(canvas)

var but = new createjs.Shape(
  new createjs.Graphics().beginFill("#999999").drawCircle(30,30,30)
)

but.mouseEnabled = true

but.on('mousedown', function() {
  console.log('click')
})

stage.addChild(but)


createjs.Ticker.on('tick', function() {
  stage.update()
})

* {
  margin: 0;
  padding: 0;
}

canvas {
  transform: translate(100px, 100px) rotate(30deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

событие мыши не реагирует правильно, после вращения холста css, есть идеи?