How do Coordinates work?

[silenuz]

I'm trying to draw pictures at a specific xy coordinate in the global coordinate system.

After two weeks and almost 40 hours I am no closer to understanding the co-ordinate system than I was when I started.

I tried working in global co-ordinate but even after getting the rotated points of my rectangle and translating back I could not get the results I wanted.

So I started playing with local co-ordinates and I still don't understand. I was under the assumption that I could just translate to the center of the item on the canvas, rotate the canvas, and draw the rectangle using the current point as the center of the rectangle but this does not work. I then tried translating to the x,y I wanted, then translating to the center of the item, rotating and then translating out the same amount I translated in from the original x,y but this doesn't work.

I have the following code, that works but I don't understand why, and I would really like to come up with a formula rather than have a long if/else chain. So can someone help me understand the following:

        SKImageInfo imageInfo = new SKImageInfo(512, 768);
        SKSurface surface = SKSurface.Create(imageInfo);
        SKCanvas canvas = surface.Canvas;
        canvas.Clear(SKColors.White);
        canvas.Save();
        
        SKPaint paint = new SKPaint();
        paint.Color = SKColors.Blue;
        paint.Style = SKPaintStyle.Fill;
       
        float x = 128;
        float y = 128;
        
        float imageCentreX = 256;
        float imageCentreY = 128;
      
        canvas.Translate(x,y);
        canvas.DrawRect(-3,-3,7,7,paint);
        
        canvas.Translate(imageCentreX,imageCentreY);
        paint.Color = SKColors.Indigo;
        canvas.DrawRect(-3,-3,7,7,paint);
        
        //canvas.Translate(navigator.ItemCentreOnCanvasX,navigator.ItemCentreOnCanvasY);
        canvas.RotateDegrees(90);
        canvas.Translate(imageCentreY  - imageCentreX,0);
        paint.Color = SKColors.Red;
        canvas.DrawRect(-3,-3,7,7,paint);
        canvas.DrawPicture(TestTile.Picture);
        canvas.Restore();
        canvas.Save();
        
        canvas.DrawPicture(Grid.Picture);
        canvas.Restore();
        canvas.Save();
        
        using (var data = surface.Snapshot())
        using (var pngImage = data.Encode(SKEncodedImageFormat.Png, 100))
        {
            string output_file = output_folder + Path.DirectorySeparatorChar + "new-test-canvas-rotation-4.png";
            using (var stream = File.OpenWrite(output_file))
            {
                pngImage.SaveTo(stream);
            }

I don't understand why after the translation to the center of the image and rotating that to translate out again my y value is 0. If the rotation was -90 the x would be 0, and I have to move just the y. Here's the resulting image, with each position marked. Note in the final image it looks as if the rectangle was drawn from right to left , top to bottom.