Hey everyone, I am drawing some rectangles in canvas and scaled them myself and that gave me the cor...

# compose

[Aditya Wasan]

Hey everyone, I am drawing some rectangles in canvas and scaled them myself and that gave me the correct result. However, later I decided to use Modifier.scale on canvas instead of my original approach and that does not seem to render anything (or render too small for it to be visible) so I was wondering if that is the correct approach or not? Code in thread

[Aditya Wasan]

private fun Screen(displayMatrix: DisplayMatrix, modifier: Modifier = Modifier, scale: Int = Display.SCALE) {
    Canvas(modifier.scale(scale.toFloat())) {
      for (y in 0 until Display.ROWS) {
        for (x in 0 until Display.COLUMNS) {
          val color = if (displayMatrix.getPixel(x, y)) Color.White else Color.Black
          drawRect(
            color = color,
            topLeft = Offset((x).toFloat(), (y).toFloat()),
            size = Size(1.toFloat(), 1.toFloat())
          )
        }
      }
    }
  }

[Aditya Wasan]

Original code

private fun Screen(displayMatrix: DisplayMatrix, modifier: Modifier = Modifier, scale: Int = Display.SCALE) {
    Canvas(modifier) {
      for (y in 0 until Display.ROWS) {
        for (x in 0 until Display.COLUMNS) {
          val color = if (displayMatrix.getPixel(x, y)) Color.White else Color.Black
          drawRect(
            color = color,
            topLeft = Offset((x * scale).toFloat(), (y * scale).toFloat()),
            size = Size(scale.toFloat(), scale.toFloat())
          )
        }
      }
    }
  }

[Dan MacNeil]

In your first code block you are setting the size of the rectangle to 1x1 pixels. In your second code block you are using the scale for the rectangle size.

[Aditya Wasan]

Yeah, but I’m also calling Modifier.scale on the parent canvas 🤔

[Dan MacNeil]

The original code block is scaling/offseting from the upper left corner. The second code block will be scaling from the center of the canvas which is the default pivot point. That may be pushing your graphics off the screen. Modifier.graphicsLayer should let you change the pivot point, I think. I'm just learning this stuff myself.🙂

[Aditya Wasan]

I didn’t think about that. I’ll definitely take a look. Thanks for helping :)