Skip to content

Draw repeat patterns or images with canvas with dart.ui #14733

@nolankelly

Description

@nolankelly

Please add support for repeating a pattern in a shape, similar to pattern fill support for the HTML canvas.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern

What I would like to do is draw a small pattern using the existing lines, rects, circles, and other shapes. I would then like to use this pattern as the fill for drawing other elements on the canvas, instead of just a color.

i.e., currently I can draw a rectangle with a solid fill color like so:

  void drawRect(Rectangle<num> bounds, Color fill) {
    final paint = new Paint();
    paint.color = new Color.fromARGB(fill.a, fill.r, fill.g, fill.b);
    paint.style = PaintingStyle.fill;

    canvas.drawRect(bounds, paint);
  }

Instead, I would like to have something like a PantingStyle.repeat, where I can set another canvas element (or similar construct) as the source for the pattern to repeat.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: imagesLoading, displaying, rendering imagesd: api docsIssues with https://api.flutter.dev/engineflutter/engine related. See also e: labels.team-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions