1

I have an idea for an application/game with similar features as an image editor.

I deal with graphics, and my programming skills are very poor, close to none. I hope it can be done relatively easily using some 2D HTML5 game engine.

What it should do:

  1. image blending modes - add and multiply modes
  2. fill area bordered by color - example: replace blue by red in are defined by black edges shape
  3. draw by mouse/finger
  4. fill area by gradient

What game engine can do the job?

1

First off, you might not need a game engine. It looks like what you need is more on pair with a graphics library.

Requirement by requirement:

  1. image blending modes - add and multiply modes

    There is browser support for various globalCompositeOperation including multiply and lighter (add).

  2. fill area bordered by color - example: replace blue by red in are defined by black edges shape

    What you describe here is a flood fill. There is no browser support for flood fill in the browsers. Yet, there are some good implementations such as floodfill.js. Which you probably could combine with whatever solution you choose for the other requirements.

  3. draw by mouse/finger

    This is more involved because we are talking about user interaction. Yet you are not the first person interested in knowing How do I hand draw on canvas with JavaScript?.

    The simplest implementation is to track the mouse (with onmousemove event) and use lineTo

  4. fill area by gradient

    We are back to browser support. You can use either createLinearGradient or createRadialGradient depending on what you want.


Therefore what you ask for is not in the realm of fiction. I had a look at libraries you may use. It appears to be that paper.js and processing.js are you best options to creating drawing tools. Another option worth looking into is fabric.js.

There is one library that the developers advertise to create games that you may find useful. It is EaselJS.

Note: None of these options have a real flood fill. The fill function they provide is to specify the filling for shapes you draw afterwards, not to fill in the area defined by what is already drawn. In fact, none of the libraries listed in List of JS Game Engines (community effort) seem to have a flood fill. If we are accepting solutions without flood fill, have a look at Cocos2d.

Processing.js is, of course, a port of Processing which is designed as a tool to learn (and teach) programming. Given that your programming skills are very poor, close to none I suggest to try this one. Addendum: Use the Writing JavaScript-only Processing.js code approach described in Processing.js Quick Start - JavaScript Developer Edition so you can integrate easily other javascript solutions such as flood fill.

1
  • Thank you very much for comprehensive explanation full of useful information. You saved me a lot of time spent researching these things.
    – Shubol3D
    May 24 '17 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.