how to draw a rotated image to context2d ?

[rafi0]

How do i properly do this? The rotation causes the image to be rendered outside of context...
I want the rotation to happen with anchor(.5,.5)

bitmap.context2d {
        rotateDeg(rotation)
        drawImage(otherBitmap, 0, 0)
      }

[rafi0]

I managed to workaround this problem:

val imgBmp = Container().apply {
        image(otherBitmap) {
          anchor(.5, .5)
          rotation(90.degrees)
        }
      }.renderToBitmap(views)

But this should also be possible using context2d.
Also my problem with the workaround is that i need to provide the "views"... i'm now sure why? It should work without any additional input

[soywiz]

This works the same way that in JS Canvas Context2D.
When you are performing rotations and things like that, you can think like an imaginary axis that is transforming.
You can actually. Draw that axis. With something like:

stroke(2.0, Colors.RED) { line(0, 0, 10, 0); line(0, 0, 0, 10) }

You are rotating that axis, and you are saying to render that bitmap in the 0,0, which means that it will render at the 0,0 in the top left corner.
If you want a different behaviour, it is possible. If you want to render the image centered to that axis, you have to change the 0,0 coordinates into -width / 2, -height / 2.

bitmap.context2d {
  rotateDeg(rotation)
  drawImage(otherBitmap, -otherBitmap.width / 2, -otherBitmap.height / 2)
}

If you want to adjust the position of the image, you can adjust the position of the original axis with translate. You can decide to do the translate before or after the rotate to dothe translation ortogonal, or based on the rotation.

For example:

bitmap.context2d {
  translate(otherBitmap.width / 2, otherBitmap.height / 2)
  rotateDeg(rotation)
  drawImage(otherBitmap, -otherBitmap.width / 2, -otherBitmap.height / 2)
}

Alternatively, for this case, you can also do something completely different. Since BitmapSlice supports adjusting the coordinates, performing flipping and rotating, you can use those methods to adjust the coordinates of the slice, and then render it.