Skip to content

Canvas or React Canvas or React Konva

Shivang Tripathi edited this page Mar 12, 2019 · 1 revision

Component for rendering the Game?

We need to have a GameState using which the entire game can be rendered at any time.

Options for rendering of the Game:

Canvas

Canvas can directly be used but that will lead to imperative coding style. Using React components will force us to think declaratively and modularly.

React Canvas

react-canvas looks like its not getting maintained since the last 2 years.

image

  • Low number of weekly downloads (less than 1000) ๐Ÿ‘Ž
  • High number of open issues ๐Ÿ‘Ž
  • Last publish 2 years ago. ๐Ÿ‘Ž

Also, the main strength of react-canvas is to draw DOM-like objects (images, texts) on canvas element in very performant way. The Pacman game will need to render graphics (like circles, squares) This is not a good option for the Pacman game.

React-Konvo

react-konva is quite a populat choice:

image

  • High number of weekly downloads(11,000) ๐Ÿ‘
  • High number of open issues ๐Ÿ‘
  • Last publish 2 days ago.๐Ÿ‘

Also,

The purpose of react-konva is to reduce the complexity of the application and use well-known declarative way for drawing on canvas.

Thus, we'll be using the React-Konvo for the game.