[PLUGIN] Canvas

Nice, that looks pretty cool.

very nice @anubis666!

Hi ; is it possible to invoke a download of Canvas.URL as a JPG image ?
Or more precisely, is it possible to convert Canvas.URL into a JPG image client-side before uploading it on a server with a PHP script ?

Nevermind, I did it.


Browser.ExecJS("
this.runtime.getObjectByUID("&Canvas.UID&").canvas.toDataURL('image/jpeg', 1.0);
")

For example.

Sources : https://developer.mozilla.org/en-US/doc ... /toDataURL & how-do-i-add-an-image-in-a-textbox_p912785?#p912785

Hi,
I am trying to create a paint bucket tool using canvas plugin. But Flood fill and rgbaAt actions of Canvas plugin not working properly in different browsers. It shows following results.

(a) Works fine in Chrome.
(b) Shows black screen in Firefox.
(c) Works fine on starting but then stops in IE and shows warning


local host not responding due to long running script

System details:

Operating System : Windows 8.1 x64 Pro
Construct 2 Version ID : r206

@anubis666

That's a sweet effect, looks great.

Hi @R0J0hound, I am creating a geometry application and using a single canvas to draw circles/arcs. But I wanted to provide the user with a eraser tool that could erase a circle/arc on this canvas when the eraser is moved on top of that circle/arc. Any possibility on how I can achieve this erasing functionality using the canvas plugin? Incidentally "Clear canvas" clears everything on the canvas and is not a desired action for this feature. Please let me know if you have any suggestions. Thanks!

@kmsravindra
You could draw an identical arc over it, only instead of black use white. A better way would be to keep a list of all the things drawn and then remove the arc from the list, clear the canvas and redraw everything from the list.

Thanks a lot R0j0 for these suggestions! On the second suggestion you made, if there are "n" circles/arcs on the canvas, then how do I know which of them is the user trying to erase? There is no overlap property for object on the canvas, right? I am sure I am missing something from what you wanted me to grasp...

@kmsravindra
Two ways I can think of would be either a math way or checking the pixel color.

The math way would check the mouse position with all the elements such as lines and pick the closest one. You'll have to look up the math to find the distance from a point to a line. Other elements like arcs and curves would take some ingenuity.

The color checking method would be done with another invisible canvas where everything is drawn the same except each line is a different color so you can just check the color to lookup what element it is. To make them easier to click you can make the lines thicker. Also the antianalyzing may cause issues with that method so you may need to do a pixel perfect version of each like the capx a page or so back.