With canvas moving objects is one of the first things I started to get up to speed with. However years later I am not aware with many different ways to go about moving a display object in a canvas project. In my earliest projects I would just step the position of an object by delta values on each frame tick, but now I know that it is better to go by a pixels per second value and multiply that by the amount of time that has elapsed sense the last update of a state.
In this section I will be starting off with a very basic canvas movement example. If you have at least some experience with canvas chances are you might all ready be moving display object around this way.
So this might not be perfect, but it might still serve as a good starting point. Also in some situations I might still take an approach that is not to different from this actually, depending of course on the kind of project that I am developing of course. If the project is some kind of real time game or simulation this kind of canvas movement can present problems with frame rate, but if it is a project where I just want to create a collection of frames it might still work okay in some cases.
In this section I will be going over a simple example of moving an object in canvas by a pixel per second rate. This is for the most part one of the best, if not the best ways to go about moving an object in canvas. It might not always be necessary though with some canvas projects, for example when working out any kind of deterministic animation rather than a game or simulation of some kind.
The basic idea is to just have a value that represents the number of pixels to move the object every second. On each frame tick find out how much time has elapses sense the last frame tick as a second value, then just move that object by multiplying the amount of time by that per pixel per second value.
This results in a circle just moving across the canvas, but should do so in a consistent way across different devices, and browsers.