[PLUGIN] Canvas

very nice —!

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 [quote:113fmedv]local host not responding due to long running script

System details:

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

—

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.

Thanks R0j0. For drawing straight lines, I am not using canvas plugin...Just drawing them by spawning a sprite . So I was able to implement the erase functionality on the lines etc., Initially, I used the same method ie., spawning small lines to make an arc/cricle so that it becomes easy to erase using collision checking. However this method of drawing circles /arcs is causing performance degrade and hence I planned to implement specifically arcs & circles using canvas plugin. Using canvas alternative, the performance has definitely improved but with a sacrifice of eraser functionality.

I could think of implementing something like undo/redo from the methods you suggested but pick & choose a particular arc OR a circle on the canvas and erasing it sounds beyond my ability using the canvas plugin. So looks like I have only one of the options left - I will have to sacrifice performance and go back to my earlier method of drawing circles/arcs w/o using canvas OR sacrifice the erase functionality on circles/arcs while using the canvas plugin.

Given this, any feature on how we can check for overlap or collision on canvas objects will be a great addon to canvas, if that is possible.

kmsravindra

The purpose of the plugin is to draw stuff to a canvas. You can already read pixels, but anything more such as keeping track of the object's that were drawn to it isn't what the plugin is for.

That said here is the color picking method:

https://dl.dropboxusercontent.com/u/542 ... cking.capx

Left drag draws a line and right click erases the line that was clicked on.

It works by adding the endpoints of each line to an array, then drawing the line on the main canvas as normal, and on a second canvas, only thicker and with a color that maps to an index in the array.

Then deleting a clicked on line is a simple matter of checking the color, deleting the array index that matches the color, and finally clearing the canvas' and redrawing all the lines left in the array.

R0J0hound, Thanks a lot for this working example. I suppose the same method could be used for arc's and circles...I will try that.

THX, DEMO ONLINE: http://construct2.96.lt/2/

R0J0hound, I am providing unbounded scroll / zoom view for my geometry application. For this, the canvas has to be on the layer that can scale for zoom-in/zoom-out purposes. So, for such a feature, can I have a very huge sized canvas? When I try to have a huge canvas, then the performance goes down drastically. Any alternative suggestions as to how I can reuse a small sized canvas while scrolling the view (It should not disturb the position of already drawn objects onto canvas earlier)?

Also I am unable to get the positioning onto the canvas accurate for touch/mouse positions after I do scroll+zoom due to layer parallax and relative positioning of canvas. Any help is appreciated as to how the relative positioning on canvas works when present on a scroll-able+zoom-able layer...Thanks a lot.

Hello, I might need help with the canvas plugin.

I've written an app that uses the plugin. A layer with some sprites on it is pasted onto the canvas. Then I use the browser object to download the picture:

invoke download of url... canvas.imageUrl .... name "pic.png"

For me it works perfectly fine, I get an image with the sprites on it and proper alpha channel. For another user it gives a png, but it is not transparent and shows compression artifacts that are common for jpg compression. Is it possible that a different (maybe older, out of date) browser would handle the canvas.imageurl as .jpg somehow out of compatibility reasons?