Dart Shapes

Circle.dart

/**
 * Represents a drawable circle for use with a canvas element.
 */
class Circle extends Shape {
  num size;

  /**
   * Initializes a new Circle instance.
   */
  Circle(context, positionX, positionY, size, speedX, speedY, color) {
    this.context = context;
    this.canvas = context.canvas;
    this.positionX = positionX;
    this. positionY = positionY;
    this.speedX = speedX;
    this.speedY = speedY;
    this.color = color;

    this.size = size;
  }

  /**
   * Draws this circle.
   */
  void draw() {
    this.context.beginPath();
    this.context.lineWidth = 2;
    this.context.fillStyle = color;
    this.context.strokeStyle = 'black';
    this.context.arc(positionX, positionY, this.size, 0, Math.PI * 2, false);
    this.context.fill();
    this.context.closePath();
    this.context.stroke();
  }
}

Main-method.dart

/**
 * The main entry point for this application.
 * Configure the rendering context and add shapes to the shapes list to be
 * rendered then attach the toggle listener and start the animation loop.
 */
void main() {
  CanvasElement canvas = document.query('#canvas');
  context = canvas.context2d;
  shapes = new List();

  context.globalAlpha = .8;
  document.query('#toggle').on.click.add((e) => toggle());

  shapes.add(new Square(context, 300, 350, 50, 50, 4, -.3, 'black'));
  shapes.add(new Circle(context, 200, 200, 20, 1, 1, 'cyan'));
  shapes.add(new Circle(context, 20, 20, 70, -5, -2, 'red'));

  start();
}

Shape.dart

/**
 * The base class for all shapes. Includes the common update functionality.
 */
class Shape {
  CanvasRenderingContext2D context;
  CanvasElement canvas;
  num positionX;
  num positionY;
  num speedX;
  num speedY;
  String color;

  /**
   * Updates the position of the shape and redraws it.
   */
  void update() {
    this.positionY += this.speedY;
    this.positionX += this.speedX;

    if (this.positionX < 0) {
      this.positionX = this.canvas.width;
    }

    if (this.positionY < 0) {
      this.positionY = this.canvas.height;
    }

    if (this.positionX > this.canvas.width) {
      this.positionX = 0;
    }

    if (this.positionY > this.canvas.height) {
      this.positionY = 0;
    }

    draw();
  }

  /**
   * Abstract draw function; must be overridden to correctly draw the specifie
   * shape.
   */
  abstract void draw();
}

Square.dart

/**
 * Represents a drawable square for use with a canvas element.
 */
class Square extends Shape {
  num width;
  num height;

  /**
   * Initializes a new Square instance.
   */
  Square(context, positionX, positionY, width, height, speedX, speedY, color) {
    this.context = context;
    this.canvas = context.canvas;
    this.positionX = positionX;
    this. positionY = positionY;
    this.speedX = speedX;
    this.speedY = speedY;
    this.color = color;

    this.width = width;
    this.height = height;
  }

  /**
   * Draws the square.
   */
  void draw() {
    this.context.beginPath();
    this.context.lineWidth = 2;
    this.context.fillStyle = color;
    this.context.strokeStyle = 'black';
    this.context.rect(positionX, positionY, this.width, this.height);
    this.context.fill();
    this.context.closePath();
    this.context.stroke();
  }
}