sky/examples/raw/painting.sky

<sky>
<style>
div {
    height: 200px;
    background-color: lightblue;
}
</style>
<div id="canvas" />
<script>
import 'dart:math' as math;
import 'dart:typed_data';
import 'dart:sky';

void main() {
  var element = document.getElementById('canvas');
  element.requestPaint((PaintingContext context) {
    Paint paint = new Paint();
    Point mid = new Point(context.width / 2.0, context.height / 2.0);
    double radius = math.min(mid.x, mid.y);

    context.save();

    context.clipRect(new Rect.fromLTRB(0.0, 0.0, context.width, radius));

    context.translate(mid.x, mid.y);
    paint.color = const Color.fromARGB(128, 255, 0, 255);
    context.rotateDegrees(45.0);

    context.drawRect(new Rect.fromLTRB(-radius, -radius, radius, radius),
                     paint);

    // Scale x and y by 0.5.
    var scaleMatrix = new Float32List.fromList([
        0.5, 0.0, 0.0, 0.0,
        0.0, 0.5, 0.0, 0.0,
        0.0, 0.0, 0.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
    ]);
    context.concat(scaleMatrix);
    paint.color = const Color.fromARGB(128, 0, 255, 0);
    context.drawCircle(0.0, 0.0, radius, paint);

    context.restore();

    context.translate(0.0, 50.0);
    var builder = new LayerDrawLooperBuilder()
        ..addLayerOnTop(
            new DrawLooperLayerInfo()
              ..setOffset(const Point(150.0, 0.0))
              ..setColorMode(TransferMode.srcMode)
              ..setPaintBits(-1),
            (Paint layerPaint) {
          layerPaint.color = const Color.fromARGB(128, 255, 255, 0);
          layerPaint.setColorFilter(
              new ColorFilter(const Color.fromARGB(128, 0, 0, 255),
                              TransferMode.srcInMode));
          layerPaint.setMaskFilter(
              new MaskFilter.Blur(BlurStyle.normal, 3.0, highQuality: true));
        })
        ..addLayerOnTop(
            new DrawLooperLayerInfo()
              ..setOffset(const Point(75.0, 75.0))
              ..setColorMode(TransferMode.srcMode),
            (Paint layerPaint) {
          layerPaint.color = const Color.fromARGB(128, 255, 0, 0);
        })
        ..addLayerOnTop(
            new DrawLooperLayerInfo()..setOffset(const Point(225.0, 75.0)),
            (Paint layerPaint) {
          // Since this layer uses a DST color mode, this has no effect.
          layerPaint.color = const Color.fromARGB(128, 255, 0, 0);
        });
    paint.setDrawLooper(builder.build());
    context.drawCircle(0.0, 0.0, radius, paint);

    context.commit();
  });
}
</script>
</sky>