Dart: fillstyle on cavnas

To be able to draw on canvas in Dart you need two things. A canvas element defined and a canvas rendering context to draw on. In this example we use a CanvasRenderingContext2D to fillstyle a set of rectangles with rgb colors of size x and y. Modified for Dart, mozilla developer example can be done the following way. Check a live example here.

    <canvas id="canvas" width="600" height="600"></canvas>
    <script type="text/javascript" src="CanvasFillstyleExample.dart.app.js"></script>
  draw() {
    var ctx = document.query('canvas').getContext('2d');
    for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.fillStyle = 'rgb(' + (255-42.5*i).floor().toString() + ',' + 
                         (255-42.5*j).floor().toString() + ',0)';

Dart: Animated H-Fractal

A fun example using Dart to draw on Canvas an H-Fractal. Fractals are those beautiful geometric shapes that can be implemented with recursion in programming languages. In this example you can see that dart is capable of calculating an H-Fractal and storing the points before drawing to the canvas very fast. Above 10 iterations things start to slow down.