pcanvas 1.1.0 copy "pcanvas: ^1.1.0" to clipboard
pcanvas: ^1.1.0 copied to clipboard

A portable canvas that can work in many platforms (Flutter, Web, Desktop, in-memory Image).

pcanvas #

pub package Null Safety Dart CI GitHub Tag New Commits Last Commits Pull Requests Code size License

A portable canvas that can work in many platforms (Flutter, Web, Desktop, in-memory Image).

Motivation #

Canvas operations can be highly dependent to the platform of the canvas framework. The main idea of this package is to allow the same behavior in multiple platforms and also improve performance and ease of use.

Platform Implementations #

When a PCanvas instance is created it will choose the proper implementation for the platform:

  • PCanvasBitmap:

    • In-memory bitmap as canvas.
  • PCanvasHTML:

    • Web (dart:html) canvas using CanvasElement.
  • PCanvasFlutter:

    • Flutter (dart:ui) canvas using a CustomPainter.
    • Widget: PCanvasWidget.
    • Package: pcanvas_flutter

Usage #

import 'package:pcanvas/pcanvas.dart';

void main() async {
  // Create a canvas of dimension 800x600:
  var pCanvas = PCanvas(800, 600, MyCanvasPainter());

  // Wait the canvas to load:
  await pCanvas.waitLoading();

  // Paint the canvas:

  // Get the canvas pixels:
  var pixels = await pCanvas.pixels;

  // Convert the canvas to a PNG:
  var pngData = await pCanvas.toPNG();

class MyCanvasPainter extends PCanvasPainter {
  late PCanvasImage img1;
  Future<bool> loadResources(PCanvas pCanvas) async {
    var img1URL = 'https://i.postimg.cc/k5TnC1H9/land-scape-1.jpg';
    pCanvas.log('** Loading image...');
    img1 = pCanvas.createCanvasImage(img1URL);

    await img1.load();
    pCanvas.log('** Image loaded: $img1');

    return true;

  bool paint(PCanvas pCanvas) {
    // Clear the canvas with `colorGrey`:
    pCanvas.clear(style: PStyle(color: PColor.colorGrey));

    // Draw an image fitting the target area:
    pCanvas.drawImageFitted(img1, 0, 0, pCanvas.width ~/ 2, pCanvas.height);
    // Fill a rectangle at (10,10):
        10, 10, 20, 20, PStyle(color: PColor.colorRed.copyWith(alpha: 0.30)));

    // Fill a rectangle at (40,10):
    pCanvas.fillRect(40, 10, 20, 20, PStyle(color: PColor.colorGreen));

    var font = PFont('Arial', 14);
    var text = 'Canvas pixelRatio: ${pCanvas.pixelRatio}';

    // Measure `text`:
    var m = pCanvas.measureText(text, font);

    // Draw `text` at (10,55):
    pCanvas.drawText(text, 10, 55, font, PStyle(color: PColor.colorBlack));

    // Stroke a rectangle around the `text`:
    pCanvas.strokeRect(10 - 2, 55 - 2, m.actualWidth + 4, m.actualHeight + 4,
        PStyle(color: PColor.colorYellow));

    // Stroke a `path`:
    pCanvas.strokePath([100, 10, 130, 25, 100, 40], PStyle(color: PColor.colorRed, size: 3),
        closePath: true);

    return true;

Examples #

See the usage examples at:

pcanvas_flutter #

To use PCanvas with Flutter you need the package pcanvas_flutter, where you can use the PCanvasWidget to build your UI.

GitHub project:

Source #

The official source code is hosted @ GitHub:

Features and bugs #

Please file feature requests and bugs at the issue tracker.

Contribution #

Any help from the open-source community is always welcome and needed:

  • Found an issue?
    • Please fill a bug report with details.
  • Wish a feature?
    • Open a feature request with use cases.
  • Are you using and liking the project?
    • Promote the project: create an article, do a post or make a donation.
  • Are you a developer?
    • Fix a bug and send a pull request.
    • Implement a new feature.
    • Improve the Unit Tests.
  • Have you already helped in any way?
    • Many thanks from me, the contributors and everybody that uses this project!

If you donate 1 hour of your time, you can contribute a lot, because others will do the same, just be part and start with your 1 hour.

Author #

Graciliano M. Passos: gmpassos@GitHub.

License #

Apache License - Version 2.0

pub points


unverified uploader

A portable canvas that can work in many platforms (Flutter, Web, Desktop, in-memory Image).

Repository (GitHub)
View/report issues


API reference


Apache-2.0 (LICENSE)


collection, dio, image, path_parsing, xml


Packages that depend on pcanvas