Clip objects drawn outside of canvas

Question

How can I clip objects drawn outside a canvas? In the following, the black square represents the boundary of the canvas. I do not want the left half the circle to be drawn because it is outside the canvas:

This is simple example, but I am drawing PNGs and SVGs inside a canvas with various transformations applied to them, and I need a solution that would clip the portion drawn outside the canvas.

Here is the code for the above:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: Container(
          width: 200,
          height: 200,
          child: CustomPaint(
            child: Container(),
            painter: CanvasPainter(),
          ),
        )),
      ),
    );
  }
}

class CanvasPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
        Rect.fromLTWH(0, 0, size.width, size.height),
        Paint()
          ..style = PaintingStyle.stroke
          ..color = Colors.black);

    canvas.save();
    canvas.translate(0.0, 100.0);
    canvas.drawCircle(Offset(0, 0), 50.0, Paint()..color = Colors.blue);
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

this can be helpful:https://stackoverflow.com/questions/59626727/how-to-erase-clip-from-canvas-custompaint — gretal, Dec 07 '21 at 05:28
I had seen that, but it didn't seem to related to clipping objects drawn outside the canvas. — user2233706, Dec 07 '21 at 05:30

score 6 · Accepted Answer · answered Dec 07 '21 at 09:25

you need to add canvas.clipRect(rect);
so your code be like that:

  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(
        rect,
        Paint()
          ..style = PaintingStyle.stroke
          ..color = Colors.black);
    canvas.clipRect(rect);
    canvas.save();
    canvas.translate(0.0, 100.0);
    canvas.drawCircle(Offset(0, 0), 50.0, Paint()..color = Colors.blue);
    canvas.restore();
  }

Yeah, I saw that API just after posting this question. – user2233706 Dec 07 '21 at 13:42 — user2233706, Dec 07 '21 at 13:42

Md. Yeasin Sheikh · Answer 2 · 2021-12-07T09:12:52.557

3

To prevent a widget to draw beyond its layout size, use ClipRect to clip it. For rounded rect shape use ClipRRect and ClipPath for custom shape.

ClipRect(
          child: Container(
            width: 200,
            height: 200,
            child: CustomPaint(
              child: Container(),   
              painter: CanvasPainter(),
            ),
          ),
        )

You can also use it before CustomPaint.

I asked a similar question and this answer also solve for this case, and I'm just repeating it here.

edited Dec 07 '21 at 09:12

answered Dec 07 '21 at 09:07

Md. Yeasin Sheikh

54,221
7
29
56

Thanks, that also works. The Canvas API is better for my scenario. – user2233706 Dec 07 '21 at 13:55

Clip objects drawn outside of canvas

2 Answers2

Linked