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.

Read More

The canvas clip method can be used to set a clipping area for a canvas element. This clipping area is a way to set an area in the canvas where everything that is draw from that point forward will only render to areas inside the define clipping area. As a result this will result in a mask or template like effect, and can be used with other canvas context methods, and laying to achieve all kinds of effects with canvas elements and javaScript code.

So the canvas clip method can be used as a replacement of, or in addition to other options such as canvas layering to achieve various effects where clipping might be called for. There are other methods that can be used in conjunction with the canvas clip method to do things that can be done with laying but with just one canvas via the use of the canvas clip method. However if all else fails there is always just having a collection of canvas elements, something that should be done in most cases anyway when it comes to working on a serious long term canvas project. Still this is a post on the canvas clip method not laying, so I will be sticking to that here for the most part.

The canvas clip method is used in a similar way to that of the fill and stroke methods when it comes to working with paths. That is a path can be used as a way to define the clip area, and then the canvas clip method is what can be used to set that clip area in the same way that a path would be filled and stroked. This method can also be used with the canvas save and restore methods, and layering of canvas elements as an over all way of creating all kinds of interesting effects with canvas elements. So with that said lets take a look at some examples of clipping and canvas.

Read More

When it comes to Unicode blocks there are the first few blocks that have to do with Latin characters such as Latin 1 Supplement, and Latin A Extended Unicode. These kinds of characters come up now and then for cretin words that come from languages like Spanish, and many other such latin based languages outside that of English. If for some reason I might be interested in just simply converting these kinds of strings into a string that contains just the first few ASCCI range characters I can used the lodash deburr method to make quick work of that kind of task. This method in lodash just simply takes away any additional accent over a letter and just converts into a plain English style letters form of the word.

There are many methods in lodash to which there is a native javaScript method counterpart, such as the deal with the lodash foreach method and the javaScript array for each method. However when it comes to the deal with for each the lodash method is not at all the same thing as the array for each method as the lodash for each method is a collection method that will work with objects in general, not just arrays. There may be some lodash methods that are just referencing native methods though, however the lodash deburr method is not one of those methods. It would seem that there is no native method for this sort of thing, so if you are not going to use lodash deburr then one will have to come up with some kind of vanilla javaScript solution for this.

Read More

So there is the native javaScript array map method, and then there is the lodash map collection method. The map method is often used in conjunction with many other methods to produce an array or collection object in general in a certain end format. For example I might map over an array of source objects to create primitive values that I would then pass threw another method such as the lodash reduce method to reduce the array of primitives into a single value.

However there are many methods that I might use other than reduce including methods like the lodash flatten method, and the lodash chunk methods that are helpful tools when it comes to working with multidimensional arrays. With lodash there are a few methods that are a single method that combines the functionality of two methods such as the lodash flatmap method which I will be going over in this post.

So the lodash flatmap method in lodash is one of many methods that I do not use often, and alo it is not such a big deal to just use map, and then flatten. never the less this will be the subject of this post.

Read More

The nodejs fs access file system method can be used to check file access permissions in a nodejs environment. The method can accept a mode as one of its arguments that can be used to set the kind of file access permissions that are to be check, and in the event that the check fails for whatever the reason an error object will be given as the first argument of the call back function that is also given as an argument. There is a bit to cover when it comes to the use of the nodejs access file system module method, as well as file access permissions in general, so lets get started.

Read More