The canvas translate method and normalizing points.
The canvas translate method can be used to add a translation transformation) to the current canvas matrix as a whole. This is done by applying an shifting the origin of the canvas matrix, rather than applying a vector in terms of direction and magnitude.
This canvas translate method can then make it so that when something is drawn to a certain point within the canvas using the canvas drawing methods it is actually drawn relative to the new translated point, rather that the usual top left corner of the canvas.
The canvas translate method is often used in conjunction with other methods such as canvas save, restore, and rotate when drawing rotated display objects on the fly rather than from a sprite sheet of images that where rotated before hand. I generally use the save and restore methods when using the translate method in any capacity actually because the method applies deltas to the current state of the canvas matrix rather than setting a fixed value.
The canvas translate method can also be used as a way to just change the drawing origin in the canvas when I want to draw something in a different location of the canvas. This can be useful as it allows me to avoid having to do something else to help with the process of normalizing points. Still it might be best to just make it so that everything in an object that serves as a model just stays relative to the origin rather than changing that in the canvas matrix outside of the model. That is to just not use the canvas translate method, but do translations in a separate state object of sorts.
So with that said lets take a moment to look at some examples of the canvas translate method.
1 - Canvas translate basic example
In the basic.js file of this canvas translate example I just grab a reference to the canvas element, and then a reference to the 2d drawing context as i would for any other canvas example. Once I have a reference to the 2d drawing context I can the use the canvas translate method to translate the canvas matrix by a given delta x and delta y value. In this example I am shifting the origin of the canvas from the default 0,0 position to 16,16 by calling the translate method off if the reference to the drawing context and passing the arguments for those deltas for x and y.
So now when I use any drawing method such ad fill rect the drawing will now happen relative to the point 16,16 rather than that of 0,0. I have then moved the location of the origin by using the translate method. To set it back I would then have to call the translate method again and pass -16,-16, or use the save and restore methods. SO the the is the basics of the translate method in action, so with that out of the way lets looks at some more interesting examples of using the translate method.
2 - A normalized chart data canvas translate example
In this section I will be going over a far more advanced example that has to do with normalized points, and using the canvas translate method to translate the canvas matrix when it comes to drawing those normalized points to the canvas. This example involves creating an object that contains a small amount of data about how well a websites blog post is preforming in terms of search impressions, clicks, and a click threw rate.
In this canvas example I am also making normalized points where each point of interest is centered around a relative origin. It is then up to the developer how to go about scaling up the set of 2d points. One way would be to apply an offset to each point, and another would be to use the canvas translate method.
2.1 - The data object with normalized points
So lets start out with the data object. Here I used a self executing function expression to wrap up everything that has to do with the data object into a closure. Inside this closure I created and returned a public api that contains the raw data, as well as normalized and scaled data. This normalized and scaled data is what I will be using when writing my view that will make use of the canvas translate method along with many other aspects of the canvas 2d drawing api.
The public api for the data object contains two methods of interest including a normalize method, and a scale method. The normalize method will create and array of points where each point has a value between negative one and positive one. So in other words all points are at a minimal scale of sorts that can then be scaled up by some kind of multiplier. This is of course where the scale method comes into play.
The data object contains are coded data, but if I where to continue working on this and make it some kind of long term project I would change this into some kind of constructor that can be fed new raw data of course. The central theme of this example has to do with the concept of normalizing points in a 2d plain, as this is what is most relevant to the over all theme of this post on the canvas translate method.
2.2 - canvas translate and the Draw Graph method
Now here is the main draw graph method that uses the canvas translate method to translate the canvas to any point in the area of the canvas element. Once one canvas is translated to a given point in interest I then call additional methods that will draw the current state of the points that have been normalized and scaled.
Here I ams also using the canvas save and restore methods as well so if I want to call this method more than once it will not keep changing the state of the canvas matrix each time the method is called.
2.3 - The draw stat objects draw method
Here I have the draw method that can be used to draw the charts normalized and scaled points to the canvas. This is of course what I am calling in the draw graph method outline above, the reason why I did this is to help make things more fine grain when t comes to drawing something like this.
2.4 - The draw base lines method
Here I have another draw method that is used to draw the base lines of the chart based on values in the data object.
2.5 - Pull it all together
In the data object I called the scale method for the first time that sets everything to a default state of sorts. I can the use the scale method to change the size of the chart. The thing to note here about normalizing points is that everything is centered around a single point, and from there it can be scaled up, this works well in relationship with the canvas translate method that can be used to change the location of where that center point of interest is.
3 - Using canvas translate, rotate, save, and restore.
So now for an example that uses the canvas translate method along with the canvas rotate method, and save and restore to rotate a box with the center of the box centered at the center of the canvas. The save and restore methods can be used to save and then later restore the current state of the drawing context. So if I use the canvas translate method to change the translation of the matrix, I can use save first to store the previous status of the context. Once I am done translating, rotating, and so forth I can then use the restore method to put things back the way they where.
4 - Points collections and canvas translate
Say for example that I want to have a display object format where a display object instance has an array of point values relative to zero, zero. In addition format also has an x and y property that is the center location of the display object. I can use the canvas translate method to translate to the x and y point of a display object, and then just draw the points in the points array. I can also use the save and restore methods as a way to draw two or more of these kinds of display objects.
4.1 - The draw module
So then I will need a draw module for this canvas translate example.
4.2 - Main.js and index.html
Now that I have my draw module I can now make use of it with a few of these kinds of display objects.
5 - Translating by direction and distance
So there is just passing x and y deltas to the translate method, but what if you want to translate by an angle, and a direction? Well we are still talking about two delta values actually, but how would you go about getting these delta values if you do not know how> Well one way would be to use the Math.cos, and Math.sin methods in two simple expressions where I am just multiplying the results of using those math functions with a distance value.
This example results in having an array of squares drawn at a distance of 150 pixels from the upper left origin of the canvas from an angle of zero to an angle of ninety degrees in a clockwise direction. After the drawing of all the squares is done the canvas matrix is restored back to the default origin at 0,0 thanks to the save and restore context methods.
6 - Conclusion
There is also not just translating the canvas itself, but whatever is being used as a module that stores the state of objects that are to be drawn to the canvas. It is often not to hard to make your own translation methods when it comes to translating the model rather than the canvas element.