YOUR GUIDE TO

Controlling the Canvas with JavaScript

How you can make the Canvas do amazing things!

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

Dynamo, Accelerator for Sprite, Scroller, Swiper for 3D, [Accessibility], Portal, Emitter, SoundWave, VR, MotionController, Physics, Pen and Parallax on canvas

We are using the ZIM JavaScript Canvas Framework which is easily to use and get started with! Find out more with ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework.

Controls operate on existing objects. We have discussed page and layout controls in ◎ Your Guide to Responsive and Adaptive design on the Canvas and accessibility controls in ◎ Your Guide to Accessibility on the Canvas with JavaScript.

We will now look at the rest of the main controls in ZIM:

• MOTIONCONTROLLER
  move objects with mouse, key and gamepad
• EMITTER
  emit objects as particles
• PEN
  dynamically draw
• PARALLAX
  move objects with a 3D effect
• SCROLLER, DYNAMO AND ACCELERATOR
  animate backgrounds and Sprites
• VR AND PORTAL
  3D for side-by-side viewers and jumps
• SYNTH AND SOUNDWAVE
  make sound and animate to sound
• SWIPER AND 3D
  move or rotate an object in 3D
• PHYSICS
  make a world with forces, collisions and more!

MOTION CONTROLLER

A MotionController() will control whatever DisplayObject you pass to its first parameter. Let’s code together with this handy Online Editor. You are one click and copy away from coding! Type or copy and press TEST:

const car = new Rectangle(120,60).centerReg();
new MotionController(car);

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

Press anywhere to make the car slide (we will fix that soon) to that location.

Car slides to where you press with MotionController

The MotionController has many parameters. See the ZIM Docs. There are bounds, rotate, flip, firstPerson, speed, and more.