YOUR GUIDE TO

Components on the JavaScript Canvas

And an introduction to events and functions

Samples of components on the Canvas MultiTouch Synth Pad

Overview of Parts of Code

There are three main areas of code as listed below. We have already seen the first two in the last guide (see the note above). We will continue to use these parts but we will concentrate on events and functions in this guide.

  1. OBJECT ORIENTED BASICS
    classes, objects, properties, methods, events
  2. PROGRAMMING BASICS
    variables, functions, conditionals, loops, arrays, object literals

Components on the Canvas

Components are Display Objects such as buttons, labels, lists, sliders, etc. that provide the user with interface so they can send input and receive output. We will be using the components provided by the ZIM JavaScript Canvas Framework. To find out more, please see ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework.

new Label("Hello Medium Readers!").center();
ZIM Skool Lesson 01 on Components
const button = new Button(250, 80, "EXPLODE", red, grey).center();
function explode() {  
button.removeFrom();
stage.update();
}
explode();
// explode();button.on("click", explode);
new Emitter(new Rectangle(50,50,red)).center();
Explosion when the button is clicked
button.on("click", function() {}); // when we want to add lines of code to the function:
button.on("click", function() {
// add a block of code here
// etc.
// etc.
}); // end the function and end the on() method
button.on("click", () => {}); // when we want to add lines of code to the function:
button.on("click", () => {
// add a block of code here
// etc.
// etc.
}); // end the function and end the on() method
const button = new Button(250, 80, "EXPLODE", red, grey).center();
button.on("click", ()=>{ // arrow function
button.removeFrom();
new Emitter(new Rectangle(50,50,[grey, red]))
.center();
});
Event with JavaScript arrow function

Components with Change Events on the Canvas

The Button component gets mousedown or click events but most of the other components have a change event. Let’s try a few out. You can go to number 10 in the ZIM Skool Lesson 01 Components Practice section and delete your current code.

const circle = new Circle(20, red).center();
const slider = new Slider().center();
circle.scale = slider.currentValue = 5;
Circle scale and Slider currentValue set to 5
slider.on("change", ()=>{
circle.scale = slider.currentValue;
stage.update();
});
Circle at scale and Slider currentValue at 10

Customizing Components on the Canvas

Components are very customizable in ZIM. Referring back to ◎ Your Guide to Coding Creativity on the Canvas, you will find other guides that discuss conveniences and how to apply STYLE. But we will take a look at the basics here.

Variety of Buttons or Button settings in ZIM
// the first few Dial parameters
// min, max, step, width, backgroundColor, indicatorColor,...
// parameters go in order with null (or undefined)
// where you want to use the default value
new Dial(0, 20, null, 50, red, white, etc.);
Components added in ZIM TEN
Components in ZIM Cat — updated Dial and Slider, Scrambler and TextEditor

Last Words on Functions — Parameters, Scope and Return

We by-passed a few important aspects of functions. The first is how we can pass in arguments to a function and collect them in parameters. The second is scope which looks at where variables can be accessed. The third is that a function can return a value.

function greet(person, message) {
new Label(person + " says, " + message).center();
}
greet("Dr Abstract", "Aloha");
Passing in arguments to parameters
  1. A variable let can be accessed within the {} it was made.
  2. A const can be accessed within the {} it was made.
function add(a, b) {
let total = a + b;
}
add(10, 20);
new Label(total).center();
// this gives a scope error
// as total is only available inside the function
function add(a, b) {
return a + b;
}
let total = add(10, 20);
new Label(total).center();
// this does not give an error
// the return value replaces the function call
// so we assign 30 to the variable total

CONCLUSION

We have taken a look at how to add components and capture their events to call functions. Of course coding is more than just putting things on the stage and capturing events. There is the logic to make it all work together. We are still seeing the parts so we need to be patient as all the pieces come together.

Early set of ZIM Components.

Further reading

If you would like to see what coding is like on a Canvas Library or Framework here is ◎ Your Guide to Coding Creativity on the Canvas.

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store