[PLUGIN] Canvas

From the Asset Store
Pixel Destruction like in "Worms" (Drawing Canvas based)
  • No idea from your description. A simple capx could help.

  • Here it is......i hope you understand my code....it's little confused,....


    best regards,



  • you need to have an instance of "sprite" on at least one layout to use it.

    you also need to position it in the place you want it to be pasted to, before pasting.

    and the canvas did not turn white, it became clear since you cleared it in the event, the white is coming from the layer background color.

  • ah...ok...but my idea is get fom snapshot from camera a picture and then use the rgbat function,....can you help me too with a capx example if you can please???

    best regards,


  • The camera object should have an expression to get the image URL. You can then use that with the load animation frame action of sprites. After that just position that sprite over the canvas and use the canvas' paste action and you should be good to go.

  • Like he said

    Just remember this important rule, in C2 you MUST have an instance of any object you want to access on at least one layout.

    You can place it anywhere and destroy it on the beginning of the layout, you can make another "bank" layout and throw everything there (this will not affect memory usage of other layouts).

  • R0J0hound,

    i have some problems with your plugin..

    Your plugin works on iOS?

    i'm exporting it to ejecta and it doesn't work, i'ts a very simple coloring game

    Could you help me?

  • R0J0hound

    the canvas plugin have problems with the tilemap object?

    i'm trying to do a splitscreen drawing a second screen but i'm using a tilemap for the map, and keep getting the javascript error line206 (col20)

    it works well if there is no tile on screen in the tilemap


    it didn't draw the tiles from the tilemap

  • valdarko

    It only works with it if webgl if off, since it internally uses the non webgl draw functions of objects. With webgl on the tilemap object doesn't need to set up it's non webgl images so when the canvas tries to use them it can't because they aren't there.

  • R0J0hound

    thnx for the reply man, i think i have no choice then

    but i have found a solution so is not that bad, thnx again

  • R0J0hound

    I need to extend your Canvas plugin with a new behaviour

    Do you know how to access "this.canvas and this.ctx" from a behaviour?


    Got it, from rex's canvas_ext

    var self = this;

    var inst = self.inst;

    var canvas = inst.canvas;

    var ctx = inst.ctx;

  • Love the plugin.

    When drawing a circle, it seems rgb and hex work, but not hsl.

    Is it supposed to work? I use chrome to preview.


  • From the first post or any of the parameters that set color.

    [quote:hcyyq67r]"hsl(120, 50%, 50%)"

    The first value is from 0 to 360. The other values are from 0 to 100, be sure the % symbol is there. All values have to be whole numbers, so no decimals.

  • Oh yes, I missed the % symbol. Big thanks!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Hey R0J0hound,

    I've modified your plugin to my liking, and was curious if you'd like to include it in your code going forward? Here's what I did:

    In EditTime.js

    AddNumberParam("X pos", "The X pos to paste from.");
    AddNumberParam("Y pos", "The Y pos to paste from.");
    AddNumberParam("Width", "The Width of Section to paste from.");
    AddNumberParam("Height", "The Height of Section to paste from.");
    AddAction(23, 0, "Paste Section", "Canvas", "Paste Section Coordinate x: {0}, y: {1}, width: {2}, height: {3} onto canvas", "Pastes Section into the canvas.", "PasteSection");
    In Runtime.js
    [code:oo4tpvca]	acts.PasteSection = function (x,y,w,h)
    		var ctx=this.ctx;
    		var buffer = document.getElementById('c2canvas');
    		var bufferCtx = buffer.getContext("2d");
    		var bufferTMP = document.createElement('canvas');		
    		var bufferTMPCtx = bufferTMP.getContext("2d");
    		var myImageData = bufferCtx.getImageData(x, y, w, h);
    		bufferTMP.width = w;
    		bufferTMP.height = h;
    		bufferTMPCtx.putImageData(myImageData, 0, 0);
    		this.runtime.redraw = true;
            this.update_tex = true;
    I'm sure there may be a better way of doing this... but this is the method that worked for me.  The good thing about this code is, it takes ALL of the layers at the exact point you specify in the C2Canvas.  Great for lots of uses, including mine.  Works great too.  If you're not interested in including it, that's ok... I'll just modify yours every time I need to download it. 
    Hopefully other people are able to get a use out of this too.
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)