How Caman works?

[proy87]

I'm trying to understand how caman works, because I edit canvas image both with Canvas API and Caman (first one api then another etc.)

And I get weird results. To fix it, I need to understand how Caman stores and draws canvas. Are there any caches? How to clear it? What reloadCanvasData and replaceCanvas do?

What is the difference between this.reloadCanvasData();this.brightness(10);this.render() and this.brightness(10);this.render();this.reloadCanvasData(); ?

Any help is appreciated.

[ghost]

I think it will be easier if you redefine what CamanJS is. At it's core, CamanJS is a framework which provides two things:

• a rich, powerful abstraction on top of the native canvas which allows data transformations.
• a plugin system where functionality can be...well... plugged in

All "Built-in" functionality - like brightness, contract, etc - are really just pre-defined plugins that provide some of the most common items. For example, the brightness function is a plugin which does this: Filter.register("brightness", function(adjust) { adjust = Math.floor(255 * (adjust / 100)); return this.process("brightness", function(rgba) { rgba.r += adjust; rgba.g += adjust; rgba.b += adjust; return rgba; }); });

Beyond that understanding, your best bet is to simply check the source. For the most part, it's actually very readable and easy to understand (I wouldn't jump into the Renderer right away though). If you have trouble though, I recommend looking through the annotated source.

To your point though, reloadCanvasData simply loads the data from the canvas into CamanJS's internal pixel data. Under normal circumstances - where your canvas isn't being modified outside of CamanJS - the two will already be in sync.

[meltingice]

Thanks for beating me to the explanation @jellison, you pretty much covered it. All of the built-in functionality is, like you said, plugins itself. The core CamanJS lib handles initialization, plugin loading, and canvas rendering. Outside of that, everything is defined by plugins.

CamanJS keeps an internal state of the canvas for multiple reasons, so if you ever modify the canvas outside of a CamanJS render command, you have to notify CamanJS that the canvas data has changed with reloadCanvasData. If you don't modify the canvas outside of CamanJS, you never need to call this function.

[proy87]

Does Caman use layers?