[PLUGIN] Canvas

OK, that's probably better to work with in the long run.

Thanks for clearing that up.

Was hoping for this..This is great! Thanks

i like it,tnx man ^^

r0j0, thanks for this great plugin, I was trying to come up with a line/box/circle plugin but the Canvas is more than enough. Great work.

Just one feature, I'd like to have. But I wonder if it's feasible. Being able to erase part of the canvas, either by pasting a sprite or drawing something. I tried drawing lines or points with rgba(0,0,0,0) but it seems the drawing logic just add stuff.

So yeah basically, is it possible to have an "erase part of the canvas" feature?

Edit: after some research, maybe :

acts.PasteErase = function(object)
{
  // erase mode inside the canvas plugin object
  this.ctx.globalCompositeOperation = "destination-out";

  [acts.PastObject code]

  // back to normal mode
  this.ctx.globalCompositeOperation = "source-out";

}

An erase action is not possible, globalCompositeOperation is set by the object being pasted. To do an erase effect, you would have to set the effect of the object you're pasting.

Sprite: set effect to "destination out"

Canvas: Paste "Sprite"

Sprite: set effect to "none"

Oh yeah you're completely right

I just tested with your idea

But! mine works too, I modified the acts.pasteObject function this way :

ctx.save();
ctx.scale(this.canvas.width/this.width, this.canvas.height/this.height);
ctx.rotate(-this.angle);
ctx.translate(-this.bquad.tlx, -this.bquad.tly);
ctx.globalCompositeOperation = "destination-out";
instances[x].draw(ctx);
ctx.globalCompositeOperation = "source-out";
ctx.restore();

R0J0hound: is it possible to add a function to you Canvas plugin to retrieve the canvas' image as data (I think the best is to retrieve a base64 text string) ?

I'm trying to add a property inside the canvas object, but it doesn't works...

(In fact, I'm trying to implement a floodfill like there http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/, but perhaps I'm trying to climb a too high mountain...

R0J0hound: is it possible to add a function to you Canvas plugin to retrieve the canvas' image as data (I think the best is to retrieve a base64 text string) ?

I'm trying to add a property inside the canvas object, but it doesn't works...

(In fact, I'm trying to implement a floodfill like there http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/, but perhaps I'm trying to climb a too high mountain...

rgbaAt gets the color of the pixel at xy in the canvas.

So you could to a nested loop like:

for x=0 to canvas.width

->for y=0 to canvas.height

-->system compare rgbaAt(loopindex("x"),loopindex("y"))= n do stuff

Very slow though, and recursion will slow it a bit as well.

newt: yes that could emulate the behavior. The problem is that a true floodfill needs to start in a spiral, starting from the clicked pixel. It needs a structure to hold all that, it's a headache to implement it outside the core of the script ;)...

For that you could use x+1, x-1, y+1, y-1, or sin, and cos.

Then there's the datastructures plug('s) to store things.

newt: something that annoys me, is that the original floodfill implementation works only with recursion. And I don't think you can build something like that with events in C2...

Doesn't the "rgbaAt" expression do the trick?

There are other implementations of flood fill that don't use recursion:

http://en.wikipedia.org/wiki/Flood_fill

Here I used the array object to implement a queue to keep track of what points to fill next.

https://www.dropbox.com/s/3qryv0kech869 ... .capx?dl=1

/examples%208/floodfill.capx

R0J0hound: it's slow as hell, but it's really, really, really impressive ! You're the best !

HAHA Awesome Guys!

R0J0hound you should really integrate the PasteDelete stuff officially...

I've made this using the modified Canvas plugin from Yann in a few Minutes:

CLICK ME!!!

The black color is actually the layouts background color. The holes in the Canvas are made at start using PasteDelete :D

EDIT:

Updated with some more lemmings :D

Runs pretty decent imo:

dl.dropbox.com/u/45711709/LemTest2/index.html

R0J0hound you should really integrate the PasteDelete stuff officially...

I won't integrate it, because it will only work with the Sprite object if it's effect is set to "none". If the sprite uses any other effect PasteDelete won't work right. It also won't work with TiledBackground or Canvas objects either.

Just give whatever object you want to delete from the canvas a "destination out" effect before pasting it.