[PLUGIN] Canvas

2 favourites
From the Asset Store
Pixel Destruction like in "Worms" (Drawing Canvas based)
  • Hey,

    has somebody tryed to use effects with Canvas?

    Does it work?

    I would like to us this for revealing explored parts of an mini-map

    using the "source in" effect.

  • would like to us this for revealing explored parts of an mini-map

    using the "source in" effect.

    Try pasting another object that has the source-in effect into canvas.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Ah ok, i miss understood.

    The effects work for sprites which are pasted onto the canvas not for the canvas itself.

    Thank you for clarifying.

  • FLOODFILL CAUSING BOTTLE NECK/ ERRORS.

    I made a simple Color by numbers app that uses 'Flood fill'.

    I tested it various browsers and it seems to slow down my CPU or infact not even work depending on the browser.

    Each event that 'flood fills' adds to the CPU usage and it doesnt drop.

    CHROME preview - Flood doesnt work....Cpu rises to 80/ 90% and compuer slows

    FIREFOX preview - Crashes (error Script: localhost/c2canvas_plugin.js:80)

    CHROME browser(dropbox) - Flood doesnt work

    OPERA EMULATOR - Flood fill works..........Cpu rises to 80/90% and computer slows

    TITANIUM wrapped exe - Flood fill works.......CPU usage rises to 80/90% and computer slows.

    Heres a pic using Opera emulator, showing that its working.

    <img src="https://dl.dropbox.com/u/22173473/OPERA.png" border="0" />

    Any ideas what could be causing the problems?

  • WHOOPS

    Here's a demo of the above App to test-

    Browser test

  • Humm i really a novice but try add a update screen for browser where it doesn't seems to work (firefox have sometimes redraw bugs) and perhaps some tests with no webgl renderer ?

    CHROME 19 ... flood work ... no real cpu/gpu activity increase but app crash (canvas plugin) after 10-20 flood.

  • Humm i really a novice but try add a update screen for browser where it doesn't seems to work (firefox have sometimes redraw bugs) and perhaps some tests with no webgl renderer ?

    CHROME 19 ... flood work ... no real cpu/gpu activity increase but app crash (canvas plugin) after 10-20 flood.

    I changed a couple settings and this version shows nearly 0% CPU usage.

    (when previewing)

    NEW

    But it still wont work in Chrome from dropbox...it kills my CPU?

    STRANGE

  • Works better for me !, suggested you perhaps to change the process ... selecting area before (special effect on this area) and then choosing the color ... i have accuracing problem on a desktop pc so i can't imagine this app on mobile with "touch" unless providing a zoom feature. There is no undo process so when filling a area with the same color than another "nearest" area the 2 becomes one and it's the end ... perhaps it's the needed effect ?

    Other thing really avoid spaces in folders and names using dropbox ... put some com plugins searching to identified the source to don't work. Sure it's not your actual problems but ...

  • Works better for me !, suggested you perhaps to change the process ... selecting area before (special effect on this area) and then choosing the color ... i have accuracing problem on a desktop pc so i can't imagine this app on mobile with "touch" unless proving a zoom feature. There is no undo process so when filling a area with the same color than another "nearest" area the 2 becomes one and it's the end ... perhaps it's the needed effect ?

    Other thing really avoid spaces in folders and names using dropbox ... put some com plugins searching to identified the source to don't work. Sure it's not your actual problems but ...

    A lot of the things you have pointed out, are possible !

    But if i cant get it run in Chrome...I cant do any test's.

    <img src="smileys/smiley7.gif" border="0" align="middle" />

  • OK, it should not hang anymore when flood filling an area that was already that color. Also Chrome is working fine here.

    I recommend using Canvas2d when using the plugin, it's faster. I don't have a system with webgl so I'm unable to correct issues with the webgl portion of the plugin.

  • Looking for help with ROJOHOUND CANVAS PLUGIN.

    I came across a website that features various HTML5 CANVAS and SVG CANVAS experiments.

    One project 'SVG to HTML5 Canvas Converter' lets you convert SVG TO Html5 canvasJavaScript function.

    professorcloud.com/svg-to-canvas

    ----------------------------------------------------

    I created the following image with SVG-edit-

    <img src="https://dl.dropbox.com/u/22173473/rounded%20rectangle.png" border="0" />

    The SVG code for this is-

    <svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">

    <!-- Created with SVG-edit - svg-edit.googlecode.com -->

    <g>

    <title>Layer 1</title>

    <rect ry="20" rx="20" id="svg_1" height="122" width="124" y="3.5" x="2" stroke-width="5" stroke="#000000" fill="#FF0000"/>

    </g>

    </svg>

    ----------------------------------------------------

    After using the coverter-

    The HTML5 Canvas JavaScript function is-

    var draw = function(ctx) {

    ctx.save();

    ctx.beginPath();

    ctx.moveTo(0,0);

    ctx.lineTo(128,0);

    ctx.lineTo(128,128);

    ctx.lineTo(0,128);

    ctx.closePath();

    ctx.clip();

    ctx.strokeStyle = 'rgba(0,0,0,0)';

    ctx.lineCap = 'butt';

    ctx.lineJoin = 'miter';

    ctx.miterLimit = 4;

    ctx.save();

    ctx.save();

    ctx.restore();

    ctx.save();

    ctx.fillStyle = "#ff0000";

    ctx.strokeStyle = "#000000";

    ctx.lineWidth = 5;

    ctx.beginPath();

    ctx.moveTo(22,3.5);

    ctx.lineTo(106,3.5);

    ctx.quadraticCurveTo(126,3.5,126,23.5);

    ctx.lineTo(126,105.5);

    ctx.quadraticCurveTo(126,125.5,106,125.5);

    ctx.lineTo(22,125.5);

    ctx.quadraticCurveTo(2,125.5,2,105.5);

    ctx.lineTo(2,23.5);

    ctx.quadraticCurveTo(2,3.5,22,3.5);

    ctx.closePath();

    ctx.fill();

    ctx.stroke();

    ctx.restore();

    ctx.restore();

    ctx.restore();

    };

    -----------------------------------------------

    Rojohound...Any chance you could post a example of the above code converted into a workable set of events for your canvas plugin?

    Thanks in advance.

  • chrisbrobs

    It's much simpler than what the converter spits out.

    http://dl.dropbox.com/u/5426011/examples12/canvas_rounded_box.capx

  • Thanks Rojohound...solved my problem again!

    Amazing plugin, learning new things everyday.

    Got lots of ideas for apps games that can be made with it.

  • Will this plugin work with Flashcanvas?

    scirra.com/forum/flashcanvas-an-answer-for-nonhtml5-browsers_topic48639.html

    I'm curious because I've built a small prototype that needs IE8 compatibility.

  • I made a simple coloring book that uses Floodfill. It works, but is there a way to leave the black outlines intact (not to color outlines)?

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