YOUR GUIDE TO

Interactivity on the Canvas with JavaScript

Including dragging, gestures, transforms, hit tests and more!

Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas

We capture traditional events such as click, mousedown, mouseover, mouseout, pressmove, pressup, keydown, keyup with the on() method, a shortcut to the JavaScript addEventListener().

You are welcome to code with an Online Editor. Copy or type and TEST this:

// we see STYLE in an upcoming guide
// this is optional - just tired of rounded orange buttons
STYLE = {corner:0, backgroundColor:blue, scale:2};
const button = new Button().center();
button.on("click", ()=>{
    button.mov(10);
    stage.update();
});

Note: we are using the ZIM JavaScript Canvas Framework. For options, please see ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework. You may want to review ◎ Your Guide to Components on the Canvas with JavaScript.

Traditional click event on Button

NOTE: we now have the ZIM Editor (based on the Kids Editor shown above).

Unfortunately, the on() method should not be chained as it does not return the object it is placed on but rather an id for removing the event: