[PLUGIN] Canvas

From the Asset Store
Pixel Destruction like in "Worms" (Drawing Canvas based)
  • R0J0hound This looks really neat. Is there a way to export the canvas to a sprite so that I can save the sprite as a base 64 string?

    Perhaps look at the paster plugin - I saw your other question - it's as easy as pasting your parts onto a paster object and either using that as the sprite right away or using a regular sprite with load image from url from the Paster object.

  • Somebody awesome. thanks for the info. I also discovered the SVG plugin with base64 strings.

  • TheWyrm


    I had made a behavior rex_canvasext to load image in rojo's canvas plugin.

  • I would like to use the canvas plugin to create an image editor. My .capx does the following:

    1. Load an image (.png or .jpg) to a sprite using the FileChooser plugin.

    2. Move the sprite/resize it.

    3. Paste the sprite into a canvas.

    4. Use Canvas.imageURL to Base64 encode the contents of the canvas.

    4. Upload the Base64 encoded image to a webserver.

    Everything works fine for .png files loaded from a local directory, but I can't seem to Base64 encode the canvas if I start from a large .jpg file instead. Does anyone have any ideas for what I might be doing wrong?

    Here is my .capx file:


    Here is a correctly Base64 encoded .png file:


    Here is an incorrectly Base64 encoded .jpg file:


  • Thanks for this hopefully these features ar integrated into C2 at some point

  • Can't Believe something as simple as rgbaAt(x,y) isn't implemented in main construct yet. Gonna try out the plugin!

  • Hey,

    I've found a weird performance issue related to the Draw Circle action.

    Basically, drawing a circle with a line width of >1 leads to a huge difference in draw calls. In my example, it's 95% CPU usage for draw calls vs 5% CPU usage, the only difference being a line width of 1.0001 vs. a line width of 1.

    Am I missing something here? Or is drawing lots of circles always going to be inefficient?

  • sqiddster

    My best guess is there may be an optimization in the browser for drawing lines with a width of 1. For the best performance with this plugin you'll want webgl set to off. That way it avoids the need to copy the entire canvas to a texture every frame.

  • R0J0hound thanks, that was my guess too. I tried turning off webGL but didn't see any improvement. Anyway, my game requires webGL so that's out.

    Can you think of an efficient way to draw lots of big thick circles? It's for a 'warp' effect at the end of my levels. Currently, I draw a whole load of big sprites which are empty circles. However naturally this absolutely slaughters the framerate because the GPU is drawing probably 90% empty pixels.

  • sqiddster

    Maybe a shader that draws the circles, since they're in a pattern. But really the gpu should be faster than that, and on my pc it is outside of web browsers.

  • Hi, someone has suggested me this plugin for doing what I am trying to do:

    I want to create a pixel count in an sprite ( or eventually canvas )


    Player collides with Object > Is player bigger than the object ( has it more mass ) > Player gets bigger by amoount equal to 10% mass of the object that it has collided with.

    And other way around, player shrinks if he hits something bigger than him.

  • Uniqui22

    Here's how yo can loop over the pixels to find how many are not-transparent:

    It's very slow though, so instead you could just calculate the approximate area of the sprite using the area of a circle or box.

  • Hi everyone, any possibility to "cancel" the Point Sampling with the canvas ?

    I really need that for my project because it's full of pixel-art. Thanks !

  • Hello! I've hit upon a weird bug it seems with the Canvas plugin - it really doesn't seem to like the Roguelike plugin ( ) being added or used in the same project!

    I'm getting this error: Uncaught TypeError: Cannot read property "pattern" of undefined, c2canvas_plugin.js, line 298 (col 34)

    It seems to be caused by the action of "Paste Object In To Canvas" - if I comment those out then the game will run (although without the funky lighting effects I've got going, sorta defeating the point of it!). It will also run if I delete the "roguelike" entity from the game, which is also undesirable.

    Is there an obvious way to fix this?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hello! I'm a developer of the Roguelike plugin and am ready to fix any of its bugs. For now, we do not know if the bug is affecting the canvas or the roguelike plugin. So maybe, R0J0hound could look into matters and fix the bug, if it's existing, or gives a clue how to improve the roguelike plugin. I'm using a canvas plugin for my main project and am also directly interested in making it work flawlessly.

    Anyway, the roguelike plugin internally does not have anything to do with the canvas drawing or any other plugin, for that matter. The point is that it only gives you back a dictionary data structure that you can afterwards use to your liking. All it's other methods are just a manipulation of that dictionary. That said, the roguelike plugin should not be able to affect the workings of any other plugin or the C2 internals, for that matter.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)