0 Favourites

[PLUGIN] Canvas

  • Canvas Plugin updated 2/9/2014

    Download:

    Actions:

    Paste Object

    Resize canvas

    Draw point

    Draw line

    Draw box

    Fill color

    Clear canvas

    New R2:

    [Fix] Canvas will now automatically redraw.

    Actions:

    + Fill canvas with gradient

    Path drawing actions:

    + Begin Path

    + Move to

    + Line to

    + Quadratic to

    + Bezier to

    + arc

    + Rectangle path

    + Set line Settings

    + Fill path

    + Draw path

    Expressions:

    + rgbaAt

    + getImageUrl

    New R3:

    [Fix] pasting objects on scaled canvas'.

    + The draw line action now has a line width parameter [warning: may cause capx made with previous version not to open. + Draw circle action. [Fix] When choosing colors the alpha value is in the range of 0 to 1, rgbaAt now returns a usable value.

    New R4:

    [Fix] Now works with WebGL. (thanks to Yann)

    [Add] Additional hotspot locations top-right,top, etc...(thanks to Yann)

    [Add] Paste Layer action(thanks to Yann)

    [Change] Paste object/layer action now only paste visible objects.

    New R5:

    [Add] FloodFill. (Thanks to Pode)

    One of the interesting features this has is the way colors are chosen.

    You can use any of the following:

    "black", "blue", "orange", "gold", etc...

    "#00FF00"

    "rgb(100, 10, 1)"

    "rgba(20, 30, 40, 0.5)"

    "hsl(120, 50%, 50%)"

    "hsla(120, 50%, 50%, 0.5)"

    Note: alpha values are from 0 to 1.

    Another nice side effect of this plugin is you can now use all the effects that html5 has to offer.

    capx:

    If anyone encounters any bugs or has a feature request for this let me know.

    -cheersR0J0hound2014-02-09 23:17:12

  • This is WICKED cool. Thanks, Rojo!

  • Looks interesting, cheers :)

  • Been hoping for this. :)

    Thanks

    Any thoughts on using some of the other functions, arc, paths, etc?

  • wow this is great!,

    but could it be that it doesn't react to mouse input or mouse position?

    tried on mouse down, draw point at mousex mousey but nothing..

  • Drawing is relative to the canvas, so if the canvas has it's hotspot at the top left corner you would use:

    Draw point (Mouse.X-Canvas.X, Mouse.Y-Canvas.Y)

    newt

    That should be doable, I'll work on adding that.

  • I like it!

    Could you add one more action to fill gradual color?

    Ah, just a suggestion.

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • R0J0hound: I just noticed that if you want pixels added in realtime to the canvas when drawing with the mouse, you need to "force refresh" on the canvas. To do that, I use two actions consequently (i.e SetInvisible by SetVisible). Apart from that, everything is great !

  • New version released. Re-download from first post.

    newt

    You can draw with paths now.

    https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes

    capx:http://dl.dropbox.com/u/5426011/plugins/pathDraw.capx

    rexrainbow

    Added fill canvas with gradient. It has horizontal,vertical,diagonal and radial.

    Pode

    It will refresh automatically now.

  • Wow, its a canvas smorgasbord!

    Thanks again.

  • I got it, thanks.

  • Awesome!!

    This will be very useful!

    Endless possibilities...

    Is it possible to add a "line width" parameter to the "Draw line" action?

    And maybe an automated "Draw circle" with position and radius parameters?

  • Awesome!!

    This will be very useful!

    Endless possibilities...

    Is it possible to add a "line width" parameter to the "Draw line" action?

    And maybe an automated "Draw circle" with position and radius parameters?

    Paths have functions, line to, and arc to do those. Here's a capx that show how to do those.

    Also rojohound I think ther may be an issue with setting color using rgba(). Seems alpha isn't changing.

    Btw just realized with getrgba you've added the functionality of the image manipulator object.

    Very nice idea.

  • Paths have functions, line to, and arc to do those.

    I know paths can do it, but they need extra actions to draw things. I mean something more like the quick actions inside the "Canvas" category like "Draw Box", "Draw Line" and "Draw Point". At least I think they are supposed to be quick actions since they are somewhat redundant with Path's actions.

    Rectangles and circles are probably the most used forms, so I think will be pretty handy to have a "Draw Circle" in a single action.

    And since the "Draw Line" is already there, adding a "Line Thickness" param would just make it more complete.

  • New version R3.

    newt

    I just noticed that alpha values have to be in the range 0 to 1. I fixed the descriptions and rgbaAt to reflect that.

    It will actually accept any CSS color value.

    http://www.w3schools.com/cssref/css_colors_legal.asp

    So you can use hsl or hsla also.

    Animmaniac

    Added a line width parameter to the "draw line" action.

    Also added a "draw circle" action. It only draws an outline, but if you want it filled use a "Fill path" action directly after.

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