[PLUGIN] Canvas

Thanks a lot for sharing this plugin R0j0, it will be very helpful for a lot of people !

mindfaQ

According to the html5 specifications the file should be a png by default. jpegs can be saved, but this plugin doesn't ask for a jpeg.

What browser are they using? Firefox and Chrome saves pngs for me.

The person uses Firefox 39.0. I am confused as well, but saw the result with common jpg compression artifacts, although in the end it was .png format. I don't suppose he lies to me.

(note: with Paster it works fine, pictures are transparent. There I have the problem that I need to use a sprite font instead of the text object, which introduces other problems (for example not being captured, when not on screen at the point of dropping the objects to the paster canvas; and worse scaling)

mindfaQ

Paster creates the url to download the same way as Canvas. It's very odd if one saves as a png and one as a jpeg.

You can look at the canvas.imageUrl string and see if it says "image/png" or "image/jpg" in the first dozen characters or so. The filename extension could be wrong. For some reason your friend's computer firefox could be defaulting to jpg instead of png.

If you look in the runtime.js and search for "canvas.toDataURL()", you can force it to use png to see if that helps by adding 'image/png' as a parameter so it would look like "canvas.toDataURL('image/png')".

Thank you, I will try that.

I cant seem to get the paste layer action to work. I turned webgl off which fixed an error that was popping up about invalid image. Now when I run the action it just seems to silently fail.

nevermind I figured it out. Awesome plugin.

R0J0hound check this out

http://jonobr1.github.io/two.js/

It's alternative solution for your plugin and it can draw in svg, canvas and webgl, there a note about to fix memory leak, there an excerpt:

Refactor of renderers and scenegraph for performance optimization and lower memory footprint

Relinquished internal events for flags

Prototypical declaration of Object.defineProperty

Added _update and flagReset methods to Two.Shape, Two.Group, and Two.Polygon

Decoupled canvas and webgl renderers and are now independent

Added _matrix.manual to override the default behavior of a Two.Polygon transformation

Localized variables per file as much as possible to reduce Garbage Collection on runtime

What do you think?

Joannesalfa

It's interesting but not really usable for this. It's not a matter of using something that can use webgl or canvas2d, it's a matter of getting something to work with c2's renderer.

R0J0hound I see, c2 renderer is a limit. I was using canvas transitions between the layouts caused memory leak, I guess we have no solution.

Joannesalfa

Not really a limit but the result needs to be put in a texture so C2 can render it. With canvas2d it's simple, just directly modify the canvas which can be drawn like any other image. With webgl it's trickier. The image needs to be copied into a texture. What's currently done is a whole new texture is made instead of just replacing the current pixels. If it was changed it would be faster I suppose, and perhaps could help with the memory leak, but I've been avoiding most coding lately.

How to use this Plugin?

When i say "Draw a Line from Sprite X/Y to Mouse X/Y" it will not working

Edelplastic

Positions are relative to the canvas itself. So you have to subtract the canvas' position.

For example

(sprite.x-canvas.x, sprite.y-canvas.y)

Thank you, i will try

Edit: I have try it, but it won´t work

Here my Settings: http://prntscr.com/7xe780

Line.X / Y is the Canvas Object --- I also have test the Objects in different ways (Line.X/Y in upper fields and Mouse in below fields)

Edelplastic

I think I didn't explain it well. Here is what all the parameters of the "draw line" action should be. I just used the standard names of objects to make it more clear.

sprite.x-canvas.x

sprite.y-canvas.y

mouse.x-canvas.x

mouse.y-canvas.y

"rgb(0,0,0)"

2