ManfredSteiner / ngx-canvas

ngx-canvas

Tutorial see: https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

In this tutorial it is shown how you can incorporate 2D Canvas graphics into Angular applications, and how you can avoid potential problems along the way. It will also show how to add motion to Canvas graphics by animating them.

Prerequisites

• Node.js
• Angular CLI
• Visual Code

Branches

In this project branches are used to reflect the step by step progress. Start with branch master and go ahead to step1, step2, ... .
Use command git checkout <branch> to get one of the following branches:

• master

  • New ng project after ng init ngx-canvas

• step1-canvas-component

  • Tutorial: Making An Angular Canvas Component

• step2-canvas-change

  • Tutorial: Drawing On The Canvas from Lifecycle Hooks

• step3-animation

  Important hint:
  npm module boids is needed, so don't forget to call npm install!
  This module does not support typescript types. These types are defined in file src/typings.d.ts.

  • Tutorial: Animating Canvas Graphics
  • What is Boids?

• step4-outside-ngzone

  • Tutorial: Avoiding Excessive Change Detection By Escaping The Angular Zone