So here is a canvas example that will draw stars to a canvas element. In makes use of a module that is used to create an array of points, and then another module that is used to draw those points to the canvas.
First off there is the module that I worked out that creates arrays of points that when drawn in order end up drawing stars. There is more than one method provided by this module to create these point arrays, and some internal helper methods to parse options and get a point when given a radian, and radius from a given origin.
One method that creates an array of points that makes up a star I called just simply create1. This method works by having not one but to radius from a center point. There is one set of points at one radius, and another set of points at another radius, and both sets of points are spaced out between each other half way. When the array of points is drawn the line will be drawn from a point at one radius to the next point at the other radius, thus forming a star like shape that way.
The other method that I worked out is called just create2, this method creates an array of points by way of having a single set of points at a single given radius, the oder in which points are added to the array is just set by a point skip argument that defaults to 2.
There are many many ideas that come to mind when it comes to further expanding a module like this. Such as having a method that returns not just an array of points, but an object where the array of points is just an argument, and then there are a bunch of methods that can eb used to update the state of those points. However for this section I will be keeping this simple for now.
I then have some draw methods that I worked out that I made as part of an additional module following just th simple object literal pattern. One is to just draw a plain black background, and another is to draw an array of points.
The draw points method will be used to draw my array of points that compose a star, however it could of course be used to draw any such array of points in general.
So then it is just a matter of using the methods to create point arrays, and then pass those point arrays to my draw points method. Apart from the usual with any canvas project such as creating a canvas element and getting a reference to it, as well as linking to my start module that I worked out above.
This results in two stars created with the two separate methods drawn at two locations in the canvas. The important thing here is that I am keeping the state of the starts separate from that of the methods that are used to draw that state. I could expand on the canvas star module by adding additional methods that can be used to manipulate the star point arrays. Another option though would be to make an example that just creates new stars each time.
So now that I have my start module and my draw points method I now want to make another example that will be a basic canvas animation of sorts. This example will involve using the create1 start method to create an array of points on each loop of a loop method. Each time i create a new array of points I will be tweaking the options that are use to create it resulting in an animation.
The values that I want to tweak are the number of points and the inner radius, each time the loop is called I will be increasing or decreasing the inner radius. In addition when the radius reaches a lower bound I will be stepping the point count.
This results in the animation I more or less hand in mind, but I am having a low of idea of other projects that might use this star module that might make for a more interesting example.
So this canvas example of a star module worked out pretty well, it was a nice little exercise at making stars for use in a canvas element. There is more than one method for making them both of which have to do with Math.cos and Math.sin that are used to find out points around a given origin point.
In this post I also touched basic on a number of other topics also, such as separating a module from a view by having the star module septate from the model that is used to draw the array of points to the canvas. With that said I hope that you picked up one or two ore interesting things when it comes to canvas, and javaScriopt in general that can be applied to your own projects in the future.