[PLUGIN] Canvas

R0J0hound - if I make a family of Canvas objects, the project won't load on IE (loading progress bar stops at 70%). Any quick fix for that issue?

If I remove the Canvas family, the project loads.

Anyway, it's a great plugin, thank you for your work!

UPDATE: eliminated the families from the project, and now floodfill doesn't work on IE: it fills with white instead of the specified color.

The same code works perfect on FF or Chome. I <img src="smileys/smiley35.gif" border="0" align="middle" /> hate IE.

I have found the floodfill bug. If anyone interested:

In the plugins runtime.js, in the flood_fill funtcion the trick below doesn't work on IE:

var color = $('<div></div>').css('background-color', _color).css('background-color').slice(4,-1).split(",");

If you replace the line above with this, it will work fine:

var color = _color.substring(_color.indexOf("(")+1).split(",");

DRAWBACK: you can't pass nice colorname or HSL color parameters, it will work only with rgb(R,G,B) or rgba(R,G,B,A) format.

I admit not the nicest fix, but the floodfill will work in IE too.

I've used the Canvas plugin and haven't experienced any crashes.

Have you tried using another computer?

Yeh, you are somehow right... on another computer the same page worked without memory overflow. Obviously the problem is with my graphic driver, or generally with my old and overwhelmed WinXP installation.

I have found the floodfill bug. If anyone interested:

In the plugins runtime.js, in the flood_fill funtcion the trick below doesn't work on IE:

var color = $('<div></div>').css('background-color', _color).css('background-color').slice(4,-1).split(",");

If you replace the line above with this, it will work fine:

var color = _color.substring(_color.indexOf("(")+1).split(",");

DRAWBACK: you can't pass nice colorname or HSL color parameters, it will work only with rgb(R,G,B) or rgba(R,G,B,A) format.

I admit not the nicest fix, but the floodfill will work in IE too.

Thx for this tip! using RGB values fixed wrong color.

What about minify? Can you use it when you use canvas plugin in your projects? For me everytime it fails, js file with all the code is not minified.

Edit:

also what I noticed that any "full screen in browser" need to be set to off otherwise flood fill is not working.

Is it possible to read a pixel colour from a point on the canvas at all?

yes, check on previous pages comments by R0J0hound

Hi,

I'm trying to make a game that is relying heavily on lighting / dynamic shadows. I found this demo posted by R0J0hound using the canvas plugin:

dropbox.com/s/y2z9fjaflqrqdkc/shadow_cast%20.capx

Apparently the size of the canvas affects the frame rate. I have tried adding canvas alone to a 1280 * 1024 layout for example and the frame rate dropped at 30 FPS.

I was wondering if it was possible to pin the canvas to an object like say the playable character. I have tried in the example above by pining the canvas to the light called target but the drawing of the shadows is all wrong now. I don't know if it's because I need to recalculate the shadows in the event or if it's simply not possible.

I want to be able to move the canvas around depending on the player position so I try to limit the size of the canvas to let's say 512*512 for example.

Any help would be greatly appreciated specially as I'm pretty bad with math.

Cheers,

EDIT: Well we managed to get the canvas follow the player, so it's working as intended. However depending on the computer, perfrormance are very different and I need to find way to optimize this.

I find this plugin really interesting for drawing dynamic paths. However, like others have mentioned, the fps hit is terrible when using WebGL and a large canvas object.

Does anyone know what's causing this?

The plugin code is quite clean and small, but my knowledge of WebGL is too limited to understand what could be causing this slowdown in the drawGL() function.

Just did an update to fix to eliminate the memory leak when using webgl. Download on first post.

I also isolated the reason the minifier fails down to the floodfill function, but beyond that I don't know what needs to be changed. So still no fix other than possibly removing that feature.

Ashley is there a way to display an error log of the closure compiler if it fails? I could not find any laying around the c2 folder.

SirSpunky

It is slow with webgl on because it copies the canvas to a texture every frame. It's faster with webgl off as it avoids doing that.

Well do you really need that feature?

Its not like you can't fill via paths.

R0J0hound

Wow, amazing, you did it! Now it runs perfect for me with WebGL enabled. Thanks a lot!!!

SirSpunky How large is the canvas object in your app? I downloaded R0J0's updated from the link in the first post and I'm still seeing about 9 FPS on iOS. At this time my canvas object is about 50% of the screen. Got a solid 60 FPS prior to CJS 1.4 and WebGL.

Btw, R0J0, thanks for the great plugin and for continuing work on it!

Thanks!

R0J0hound not sure if you can help with this, but I'm seeing this error when switching off of a layout that contains a canvas object. This is new since your update:

Uncaught ReferenceError: glw is not defined

localhost/c2canvas_plugin.js, line 248 (col undefined)

I'll see if I can get around this by explicitly destroying the object or something, but thought I would share. Thanks!

clrammer

My canvas is 1920x1080. I've only tested on desktop though, and so far I'm only using it to draw basic shapes like lines and circles that I redraw every tick. I'm just using a single canvas object.

Before the update I had 30 fps, but now I'm back at 250, which is the same as without the canvas.

I'm not getting your ReferenceError, although it looks like it might be a bug in instanceProto.onDestroy() as I don't see how glw could be defined. Not sure if this is related to your performance though.

You mean your fps is the same as before the update, with WebGL enabled? And you're sure the fps drop is caused by the canvas? Maybe you could try on desktop to figure out if it's on iOS only?

SirSpunky

Thanks for the info. Quick summary of my situation:

1) One canvas object, about 50% of the screen, used exclusively to draw lines (drawing with your finger).

2) With CJS 1.3, performance on iOS was great (60 fps). Performance was stellar in Chrome as well.

3) After CJS 1.4, performance on iOS dropped to 9 FPS even when idle. Performance in Chrome is still excellent.

4) I tried disabling WebGL for my app, but it won't launch on iOS at all due to the memory management that is lost (several layouts with large images that work totally fine when they are only loaded into RAM when that layout is active - which is what CJS 1.4 introduced, apparently leveraging WebGL to do it).

Now that I understand more what's happening, it makes sense to me why all three statements above happened. So, at this point, I'm trying to figure out how to creatively work around the inherent performance hit of using WebGL and canvas together.

Think it would be possible to only spawn a very small canvas object when the user touches the screen that follows the finger and somehow "paste" the trailing line to the screen?

As a final note, I'm certain the glw error is not related to performance. I've been unable to figure out how to work around it, although I got lucky a few times and was able to exit out of the layout without getting the error, but I can't reliably reproduce that.