0

It seems like VS and GTK are only needed to build node-canvas, which is required by konva.

Forgive me since I'm a complete newbie, but is there any other way of doing this without having to download and install a bunch of huge things that I'll never use for anything else? The whole process seems silly to me, since most browsers natively support HTML5 canvas these days.

hoangbv15
  • 360
  • 2
  • 4
  • 14
  • you can see the instructions to build node-canvas here https://github.com/Automattic/node-canvas/wiki/Installation---Windows – hoangbv15 Jul 05 '16 at 19:05

2 Answers2

1

You can use Konva in NodeJS environment. For that case node-canvas is required. So you have to install all dependencies for in.

Probably you do not need NodeJS. You can use browsers environments. For that case node-canvas is not required. DEMO

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Thank you very much @lavrton. I'm starting a React Redux web app using this boilerplate [link](https://www.reactstarterkit.com/). It only uses npm and webpack to install and package modules (for some reason a lot of react boilerplates prefer it that way). In that case, what's the best way for me to do this? Should I find another boilerplate that uses bower? – hoangbv15 Jul 05 '16 at 19:12
  • @hoangbv15 it is ok. You will use node (and npm) here just for building and installing packages. Your code will work in a browser. – lavrton Jul 06 '16 at 00:25
  • Yes, but the problem is, konva.js then explodes at the line `require('canvas')` with the error message 'Cannot find module 'canvas'". I honestly feel it's better to just build my own webGL components.... – hoangbv15 Jul 07 '16 at 09:45
  • @hoangbv15 Konva do not work with webgl, only 2d context. I am not sure what building tool you are using. But `browserify` and `webpack` understand that `canvas` dependency is not required in browser environment. – lavrton Jul 08 '16 at 11:33
  • I do use webpack! Anyways, I found the answer, thank you very much for your help lavrton! – hoangbv15 Jul 08 '16 at 21:10
0

I found the answer, it's very simple that I missed it for a whole week!

Just do a npm install konva react-konva --save-dev, without installing node-canvas.

Before I imported konva at the start of my component file like this

import {Layer, Rect, Stage, Group} from 'react-konva';

But this is loaded before the DOM was created, so webpack couldn't resolve 'canvas', which resulted in a 

Could not resolve module 'canvas'

Exception.

I made it work by moving this down to either componentDidMount or render method:

render() {
    const {Layer, Rect, Stage, Group} = require('react-konva');
    return (
      <div ref="containerDOM">
        <Stage width={700} height={700}>
          <Layer>
            <Rect
              width="50"
              height="50"
              fill="green"
            />
          </Layer>
        </Stage>
      </div>
   );
}
hoangbv15
  • 360
  • 2
  • 4
  • 14