What is flutter canvas kit renders ?

Flutter CanvasKit Renderer

CanvasKit is one of Flutter's rendering engines for web applications. It's a WebAssembly (Wasm) based implementation of Skia, the 2D graphics library that Flutter uses for rendering on mobile platforms. CanvasKit brings desktop-quality rendering performance to web applications.

Flutter Web Renderers

Flutter for web supports two rendering backends:

What is CanvasKit?

CanvasKit is a compiled version of Skia (written in C++) converted to WebAssembly that runs in the browser. It provides:

• Consistent rendering across platforms (web matches mobile/desktop)
• High performance graphics and animations
• Full Flutter feature support including custom painters and shaders
• Pixel-perfect rendering identical to mobile platforms

How CanvasKit Works

textCopy
Flutter App Code (Dart)
        ↓
Flutter Framework
        ↓
Skia Graphics Engine (compiled to WebAssembly)
        ↓
WebGL (GPU acceleration)
        ↓
Browser Canvas
        ↓
Screen

Specifying the Renderer

At Build Time

bashCopy
# Build with CanvasKit (default for Flutter 3.x)
flutter build web --web-renderer canvaskit

# Build with HTML renderer
flutter build web --web-renderer html

# Build with auto-detection (chooses best for device)
flutter build web --web-renderer auto

At Runtime

bashCopy
# Run with CanvasKit
flutter run -d chrome --web-renderer canvaskit

# Run with HTML renderer
flutter run -d chrome --web-renderer html

In Code (Advanced)

dartCopy
// main.dart - not commonly used
void main() {
  // This is handled by Flutter framework automatically
  runApp(MyApp());
}

CanvasKit vs HTML Renderer Comparison

Feature Comparison

Performance Comparison

dartCopy
// This widget benefits from CanvasKit
class GraphicsIntensiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(300, 300),
      painter: ComplexGraphicsPainter(),
    );
  }
}

class ComplexGraphicsPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Complex drawing operations
    for (int i = 0; i < 1000; i++) {
      final paint = Paint()
        ..color = Colors.blue.withOpacity(0.5)
        ..strokeWidth = 2;

      canvas.drawCircle(
        Offset(size.width / 2, size.height / 2),
        i.toDouble(),
        paint,
      );
    }
  }

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

When to Use CanvasKit

✅ Use CanvasKit For:

1. Graphics-Intensive Apps

dartCopy
// Games, animations, data visualizations
class AnimatedGame extends StatefulWidget {
  @override
  _AnimatedGameState createState() => _AnimatedGameState();
}

class _AnimatedGameState extends State<AnimatedGame>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return CustomPaint(
          painter: GamePainter(_controller.value),
        );
      },
    );
  }
}

2. Custom Painting and Drawing

dartCopy
class DrawingCanvas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyCustomPainter(),
      child: Container(),
    );
  }
}

3. Apps with Complex UI Effects

dartCopy
class BlurredBackdrop extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Container(
        color: Colors.black.withOpacity(0.5),
      ),
    );
  }
}

4. Cross-Platform Consistency Required
   • When web app must look identical to mobile/desktop versions

❌ Avoid CanvasKit For:

1. Simple Text-Heavy Apps

dartCopy
// Blog, documentation, content-heavy sites
class TextHeavyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            Text('Lots of text content...'),
            Text('More text...'),
            // HTML renderer is better here
          ],
        ),
      ),
    );
  }
}

2. SEO-Critical Websites
3. Apps with Slow Network/Low-End Devices
4. Maximum Accessibility Required

CanvasKit Configuration

Customize CanvasKit Loading

Create

web/index.html

htmlCopy
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Flutter App</title>

  <script>
    // Configure CanvasKit loading
    window.flutterConfiguration = {
      canvasKitBaseUrl: "https://unpkg.com/canvaskit-wasm@0.38.0/bin/",
      canvasKitVariant: "auto", // Options: "auto", "full", "chromium"
    };
  </script>
</head>
<body>
  <script src="flutter.js" defer></script>
</body>
</html>

CanvasKit Variants

javascriptCopy
// web/index.html
window.flutterConfiguration = {
  // Use full variant (larger but more compatible)
  canvasKitVariant: "full", // ~2.7 MB

  // Use Chromium variant (smaller, Chrome-only optimizations)
  canvasKitVariant: "chromium", // ~2.3 MB

  // Auto-detect best variant
  canvasKitVariant: "auto", // Recommended
};

Optimizing CanvasKit Performance

1. Lazy Loading

dartCopy
// Load heavy graphics only when needed
class LazyGraphicsPage extends StatefulWidget {
  @override
  _LazyGraphicsPageState createState() => _LazyGraphicsPageState();
}

class _LazyGraphicsPageState extends State<LazyGraphicsPage> {
  bool _loadGraphics = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => setState(() => _loadGraphics = true),
          child: Text('Load Graphics'),
        ),
        if (_loadGraphics)
          GraphicsIntensiveWidget(),
      ],
    );
  }
}

2. Caching

dartCopy
class CachedCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Cache complex paths/images
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, size.height);

    canvas.drawPath(path, Paint());
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // Only repaint when necessary
    return false;
  }
}

3. Use RepaintBoundary

dartCopy
class OptimizedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Static content'),

        // Isolate repainting to this widget only
        RepaintBoundary(
          child: AnimatedGraphicsWidget(),
        ),

        Text('More static content'),
      ],
    );
  }
}

Debugging CanvasKit

Check Active Renderer

dartCopy
import 'package:flutter/foundation.dart';

void main() {
  print('Platform: ${defaultTargetPlatform}');
  print('Is Web: ${kIsWeb}');

  runApp(MyApp());
}

DevTools Performance

bashCopy
# Run with performance overlay
flutter run -d chrome --profile --web-renderer canvaskit

# Open DevTools
flutter pub global activate devtools
flutter pub global run devtools

Bundle Size Optimization

bashCopy
# Minify and compress
flutter build web --release --web-renderer canvaskit --dart-define=FLUTTER_WEB_USE_SKIA=true

# Check bundle size
ls -lh build/web/

Browser Compatibility

Fallback Strategy

htmlCopy
<!-- web/index.html -->
<script>
  // Detect WebAssembly support
  if (typeof WebAssembly !== 'object') {
    // Fallback to HTML renderer
    window.flutterConfiguration = {
      renderer: "html"
    };
  } else {
    // Use CanvasKit
    window.flutterConfiguration = {
      renderer: "canvaskit"
    };
  }
</script>

Best Practices

1. Choose Renderer Based on Use Case: Graphics apps → CanvasKit, Content apps → HTML
2. Test on Target Devices: Performance varies across devices
3. Monitor Bundle Size: CanvasKit adds significant size
4. Use Auto Renderer: Let Flutter choose optimal renderer
5. Optimize Assets: Compress images and reduce asset sizes
6. Profile Performance: Use Chrome DevTools to identify bottlenecks

Common Issues and Solutions

Issue 1: Slow Initial Load

Solution: Use HTML renderer or implement loading screen:

dartCopy
class LoadingApp extends StatefulWidget {
  @override
  _LoadingAppState createState() => _LoadingAppState();
}

class _LoadingAppState extends State<LoadingApp> {
  bool _isLoaded = false;

  @override
  void initState() {
    super.initState();
    // Simulate CanvasKit loading
    Future.delayed(Duration(seconds: 2), () {
      setState(() => _isLoaded = true);
    });
  }

  @override
  Widget build(BuildContext context) {
    if (!_isLoaded) {
      return Center(child: CircularProgressIndicator());
    }
    return MyApp();
  }
}

Issue 2: Text Rendering Quality

Solution: Use native text widgets when possible:

dartCopy
// Prefer Material/Cupertino text widgets
Text('High quality text') // Uses platform text rendering

Important: CanvasKit provides desktop-quality graphics on the web but comes with larger bundle sizes and longer load times. Choose the renderer that best fits your app's needs.

Documentation: Flutter Web Renderers