I really like canvas elements they are the coolest HTML elements to work with, so of course I have got myself into the habit of making a bunch of canvas examples of my own. On top of that I also took the time to go about writing posts on these canvas examples here on my github pages site where I get into detail about the source code of each of them.

So then it seems like a good idea to have a post that will serve as a main index post of sorts for all of these canvas projects. That is a special post in which I briefly write about each of them, and of course like to the post where I should have the canvas example embedded and go over the source code of the example detail. So then this post will serve as that sort of central index post on all of my canvas examples that I have made thus far.

The canvas examples I have made range form simple animations, to more complex game and simulation prototypes in various stages of completion. Many of them are prototypes for games that I have not continued developing into a finished product. Other examples are starting to feel like a done deal, but might still need a little more work in terms of features, code readability, and so forth. So I have gotten into the habit of making sure that there are embedded packages for each canvas example in the post where I write about it that might help to sever as a way to get me to put a little more time and effort into the examples that may need more work.

I am going all over the board when it comes to playing around with canvas elements naturally because canvas is a great example of fun and exciting javaScript rather than boring yet practical javaScript, or at least that has been my experience with it thus far. So of course I have to make a lot of them, and maybe if I get to it pour a little more time and effort into some of them. So lets get to the list of canvas examples here then as they currently stand.

Above is v0.22.0 of cross hairs which is a game that I put a fair amount of time into.

1 - The github repo

I have set up a git repository at my git-hub account for these canvas examples where all of the examples can be cloned down from if you want to quickly clone down the source cone of them to play around with and use locally. Most if not all of them should work okay by just opening up the index.html file of an example via the file:\/\/ protocol when it comes to just using them that way.

If you actually want to help improve the source code of some of them then that repo would of course be where it is that you would want to make the pull request. However this is mostly still my project, and I assume that many of you might wish to spend time working on your own set of canvas examples that might progress into actually games, animations and utility projects. It is just night to find people that have a collection like this on there website as a way to learn more about canvas, and the various ways to go about making them.

2 - My top picks thus far

Although I now have over 40 canvas examples, and I am still making more, only a handful of them thus far are examples of my best foot forward when it comes to javaScript and canvas. This is not to say that many others are not worth checking out, it is just that many of them are lacking the additional amount of polish that helps to make a canvas project stand out.

So I thought I would take a moment to just write about my top pick from this list, and as time goes by I might update this section to reflect the current state of affairs when it comes to half way decent work. Also I think that I might just update this section to reflect what is currently getting more attention then the others when it comes to various improvements when it comes to additional features, graphics, performance, and code readability improvements.

2.1 - Pop The Lock Clone

This is a simple game that has a lot of room for originality still also. I have been working on this one a little lately and I think there is still a lot of room for improvement, but only when it comes to additional features. The core of the game itself is so simple that making a clone is something that can happen in a flash. So now that I have the core idea of the game fairly solid the focus has shifted to adding features that make the game more engaging.

2.2 - Hyper casual space Shooter

This is a new one the I started in December of 2020 that is just a basic hyper casual style space shooter game in which the player just moves around and blasts blocks. I have some additional plans when it comes to continuing to work on this one, and might make this project the focal point for a while until getting back to work on one of the other canvas examples that need additional work.

2.3 - Cross hairs

I put a fair amount of time into cross hairs! thus far. I can not say that this is my dream project, but it is starting to look like a finished product at least. There is still a fair amount of work left to do though when it comes to even features that most might see as basic though.

Eventually I will get cross hairs in good shape, and it will be time to move on to another one from the list below. However for now I think there is still a lot more work to do with that one, so it might be a while yet. So when it comes to actually playing this one I would still say doing so might not be a good idea, as I might introduce game state braking changes at this point.

2.4 - Mr Sun

I have made not one, but several canvas examples based off of the source code that I started with my Mr Sun example. This is another canvas example that I would like to poor a fair amount of time into, to create something that is not just fun but also loaded with features. There is not just one idea for a final project, but several ideas, but all of theme share a common set of features. With that said this main canvas example of Mr Sun is just the core source code, along with just a core set of plug ins. There are the other canvas examples though where I am starting to really take off with plug-ins and going beyond just the core set of code that I am working out here.

3 - The full Canvas Examples list

Now for the list of examples with links to each, and a brief description while I am at it. The list is just in alphabetical order going by the name of each canvas example for now. I am not sure if I will get around to breaking these down into smaller categorizes yet, but I might at some point in the future because many of them are just animation type things while others are games that work with user input.

As of this writing I am working on making embedded version of each of the canvas example in each page. SOme of them will have them, and others will not. I am sinking a lot of time into this both when it comes to making additional examples and improving the quality of the older ones.

3.1 - A planet of mine clone

I made a clone of the game called a planet of mine, or I have started one at least. This canvas example is of a game where I have a world object, and then worker objects that can be set to land tiles in the world object. I enjoyed playing the game that it is based off of and want to at least start a clone of it that I can start to play around with a little.

3.2 - Animation basics canvas example

In my animations basics canvas example I touched base on the basics of animation and canvas elements as I currently have come to understand it. Animation can be a powerful tool, as it is not always about making things that are artful, but practical as well. For example if you are trying to wok out some kind of problem it some times make sense to visualize that problem.

3.3 - Animation and fractals

I have some interest in fractals, and thus far I have this one post that I have worked out where I am making a basic fractal and displaying a fractal like animation with canvas elements. It is nothing major just a basic visual effect that has to do with something that keeps scaling up or down forever which seems to be the central things about fractals.

3.4 - Animation and pixmaps

I would like to work out a simple, crude, yet effective way to go about creating sprite sheet assets with a little javaScript code rather than using extremal images. This way I can continue creating builds where the whole example can be just one single javaScript file rather than making the situation more complex by making it so external images must be loaded first. This canvas example is the current state of working out such a standard.

3.5 - A simple ball bounce canvas example

In this example I have just a simple bounding ball, a typical example that just about any javaScript developer will end up getting to at some point or another. getting to working on this kind of example is a good way to become familiar with certain things that are common with many javaScript projects such as collision detection, and how to go about setting or change the angles or directions of things when they hit a surface.

3.6 - A Basic idle game

In this post I made a very basic idle game prototype. Nothing major with it, just many of the core features of such a game in a very bland unbranded generic form. There is just starting out with a very basic crude example that is just stepping a money variable when clicking a button, and then having upgrade buttons and over time production. Many simple idle games are not that advanced, but they do still have some kind of theme.

3.7 - A button layout module

One thing that comes up often with canvas projects is how to go about adding buttons. A quick and simple way is to just use html input tags, however often it might be more desirable to have some area in the canvas element that acts as a button. So I have a post in which I work out a module that helps with the process of adding buttons to a canvas project.

3.8 - A basic clock canvas example

Making a clock with canvas can be fun, and I also find making them easy and therapeutic actually. There is of course going in all kinds of novel and interesting directions with clocks, but there is also just starting out with the basics. So with this canvas example I worked out just a basic form of how to go about making a simple clock object model, and draw module for just a simple digital and analog combination clock.

3.9 - Clock and particles

Yet another clock example this time it involves a collection of particle objects that move outward from the center of the clock face. Thus clock is just a slightly more advanced version of the basic clock example that I started out with.

3.10 - game beach concept

This is a concept for a game that involves turrets and ships to which the turrets attack. I wanted to make something where the whole game of sorts if you can call it that is actually fully automated. So this canvas example does not involve any user input, but rather involves javaScript code that automated the actions that the user would otherwise preform.

If I get some more time to get back into this canvas example though there might be some potential for some kind of game that might prove to be a little fun. But for now it would seem that this is just yet another one of my unfinished prototypes.

3.11 - Making a breakout game clone

I thought it would be a good idea to start yet another breakout clone. This is one of many ideas of a kind of project that has been all ready done to death, but there still may be a great deal of potential for adding a unique spin to it. I have many ideas when it comes to adding all the various little features that would make this breakout clone stand out aside from all the others. However as of this writing there are so many other canvas examples that I would rather work on at the moment, so I might not get around to that any time soon.

3.12 - A cannon shoot game canvas example

There are many games that have came and went ever the years that can be described as a kind of cannon shoot type game. That is some kind of game where you have a way of shooting a display object off from a given starting position, angle, and power, and then see how far t goes from there. This is my first, and as of this writing last effort and making that kind of game from the ground up.

3.13 - cross hairs!

A game about a cross hairs object that you can move around and do damage to grid cells. I put a fair amount of time into this one actually, but I did not get the very core of what they game should be just right. I just wanted to have this game where I move around on a map and just blow stuff up, with that said I guess that I did just that, but I cant help but feel that there is still a lot missing.

This is one of several canvas examples that is on my radar for additional work when it comes to making the example more fun.

3.14 - Fixed shooter hybrid

This is like a fixed axis shooter game only the player is fixed to an area rather than a single axis. One such game that might be similar to this is the classic game centipede. This is another one of my examples where I just wanted to get the basic idea of the game up and running, but I did not get far beyond that just yet.

3.15 - Flappy collector idle

This is a canvas example that aims to be a novel spin on flappy bird. Although it might be best to come up with a truly original idea for a canvas project, some times it is more realistic to take something that has been done before and try to find something new to do with it.

3.16 - Flappy collector a flappy bird clone

This is just a flappy bid clone of sorts, I just wanted to take a moment to make my own rendition on this one, and then maybe one or two more based off of it. Many games now are just clever, unique remakes of things that have all ready been done before hand anyway. The idea I have in mind is to start cloning something that has been done before, but then try to find a way to make it my own somehow. However first i do have to start with a clone that is not all that different from the original.

3.17 - A kaboom clone

I have found myself making clones of certain classics from the Atari 2600, this is one such canvas example that is a clone of the game kaboom. There where a lot of other games that came out where the core logic of the game was more or less the same such as avalanche.

3.18 - Map idle game prototype example

There is yet another example of an idle type game that involves a grid that has assets at each location that generate money. Not much more beyond that I just wanted to make that kind of game, and like many of these examples I got the basic idea working and then moved on to the next thing. However this is one example that I do think I will be getting back to at some point. I do like playing and making these kinds of games actually.

3.19 - Mr Sun

This is the first of several canvas example all based off of the source code that I worked out here. The basic idea here is to have a game where the player has control over the position of a sun that can be moved around inside of an area surrounded by game world sections.

3.20 - Mr Sun Geo

I started this example by forking off from the source code of Mr Sun temp, and just added a few more plug-ins that add additional features that have to do with a game world. After temperature there is adding things that have to do with geology, volcanic activity and so forth.

3.21 - Mr Sun temp

This is a fork of the Mr Sun canvas example, it is more or less the same source code, but with some additional plug-ins that have to do with temperature. This just seems like the next step to take when I get the very core of the game itself worked out. WHen I started this one I kind of jumped the gun by staring it to soon, however once I get the core of the game solid I am sure that I will be coming back to this one.

3.22 - game spinner

So I wanted to have at least one canvas example that is a game spinner that is similar to that of something that you find with many board games. This is something that I might make use of in other canvas examples in one form or another, but of not it is just yet another kind of exercise when it comes to just learning how to work with canvas and javaScript.

3.23 - Grass blades

Just some grass blade animation type thing that looks kind of cool. Canvas is not just for making games, it is nice to make things that are just nice to look at for a little while also. This is just yet another thing that came to mind when it comes to just making some kind of canvas animation type thing just for the sake of doing so. However even when it comes to something like this there is more than one way to get this kind of effect, I might come back to this one now and then to add some more features.

3.24 - Canvas Grid module

This canvas example is of a starting point for a grid module that is an important part of most canvas projects. There is a lot to cover when it comes to this kind of module when it comes to how to go about create an object for a grid. There is how to go about creating an array of cell objects, or if such an array is even need to begin with.

3.25 - grid defense

A grid defense style game prototype that involves units that come from one side of the canvas and they must be destroyed before they reach the other side. Yet another typical core game mechanic for a whole lot of on lines games, some of which where fun.

3.26 - Monster Smash

A monster smash RPG style game idea that I gut started, but as of yet have not finished. The general idea that I had in mind was something like dragon warrior for the nes, but I wanted to add a bunch of things to find a new spin on this type of game.

3.27 - Grid gradient

A canvas example of a grid where each cell changes color depending on the status of an array of objects the properties of which can be changed by way of plug-ins for the main state module that is used. This is an example that I put a fair amount of time into when it comes to working out a half way decent plug in system, but I did not go to nuts when it comes to adding plug is for it. However it is still something that I look back to now and then when it comes to how to go about creating something where there is a simple core module that can then be extended with additional option code that can be added, and taken away without to much hassle. Which is of course a great way to go about handling things for sure.

3.28 - Grid world simulator core

A start with what might become a world simulator type canvas example thing like that of Sim Earth. As of this writing thougn I did not get very far with this one. If I do get back into this project it might end up being like my Mr Sun project where it is not just one example but a bunch of them. The main thing when it comes to starting something like this I think is to get the plug in system, and main state machine solid before getting to deep into the logic.

3.29 - Hyper casual space Shooter

This is another hyper causal game where the player can just fly around and blast blocks. This is one of my examples that I put a fair amount of time into actually, but it still does not feel like a finished product just yet. However there are a lot of cool features all ready that I never really got to with other canvas examples, such as the weapon system, and the nature of the game would.

3.30 - Hyper casual to the black

My first canvas example of a hyper casual game where a ship just keeps moving out into space. The idea came to me to just have a simple little project where a ship is moving at a given rate, and I just have a simple expression that tells me how long it will take to get to a given point at that given rate.

3.31 - The limits of 2d images

This is one project example I find myself coming back to now and then. It has to do with the limits of 2d images given a a set width, height, and color depth. What is cool about this is that it is a system where each possible image has a number from 0 to the max number of images that are possible with the given resolution and color depth.

3.32 - image loader

Here I have a simple image loader example for a canvas project that I worked out for my own reference for when it comes to getting around to skinning some of these with some external images. With all of these canvas examples thus far I try to avoid having to use external images actually. I often prefer to work out some kind of alliterative to having to deal with this sort of thing.

3.33 - input controller

An input controller concept for canvas projects, or at least a start for such a thing. When it comes to using most game frameworks something to this effect would often be built in. However when it comes to making my own frameworks or creating a game from the ground up I of course need to come up with my own system for these kinds of things.

3.34 - kill box

This is a canvas example idea that is not done yet, but I started a post on what I have thus far. It is or will be rather a game where units just keep coming into an area and the object is to destroy them with other units.

3.35 - Map scrolling

In this canvas example I worked out a basic example of getting scrolling working with a large grid in a canvas project. I often like to create games that have just a single small fixed grid which helps to avoid a lot of work when it comes to something that involves a large game map. This is a subject that can end up breaking off into many other little topics when it comes to breaking things down to keep things running smoothly. However for this example at least i am just working out the very basics when it comes to scrolling around a map that is still a little small.

3.36 - object pool

This project is an exercise of having an object pool, that is just simply a set collection of objects that are used over and over again, rather than pushing and splicing out as needed. I have come to find that I like to have this kind of library in many of my canvas projects, as such this is something that I come back to often, and also is part of many other canvas examples in one form or another.

3.37 - binary particles

The idea just came into my head one day to make some kind of fun and interesting canvas example that involves two types of circles. When two of two different types combine into one, then it results in an explosion. So then the result is a somewhat interesting visual effect, and this is just another kind of animation or digital art type project.

3.38 - search and destroy particles

Yet another Search particles based project this time taking a kind of search and destroy type direction with it. Many games, as well as random animation or digital art type things will often involve some kind of crude yet effective artificial intelligence. In this example I have a particle that is looking to just search and destroy other particles that are of another type than that of its own.

3.39 - percent values and Math log

A simple canvas example that shows graphically what a method I worked out does with a percent value that makes use of Math.log. There is a whole lot to write about when it comes to suing the Math.log method as well as all the various expression that one can end up creating when using it for various projects. The Math.log method is often used for thins like experience point systems, animations, and anything else to that effect. So I wanted to create a canvas example that helps me to get a visual idea of the effects of the Math.log method compared to other expressions that will not make use of other Math.log.

3.40 - Pointer manager

I think that it is generally a good idea to make a canvas project to work with pointers in general rather than making a project to desktop or mobile centric. So I made a quick Canvas Example that is a way to manage pointer input from both mouse and touch events. This is one of several examples where I am working out something that is a very basic framework of sorts, as there is more to it than just a basic pointer manager. I also have a crude yet functional state machine of sorts that helps to keep things better organized, but still the focus with this example is on pointer events.

3.41 - Pointer movement

Here is a Canvas Example that is a User interface design for moving a map, or anything for that matter by way of touch or click events. The interface works by way of a pointer start point on the canvas, and a distance to a current point on the canvas. This distance is then used to set the rate at which the map moves, and the angle from the start point to the current point is used to set direction.

There is also a way to do a long press or click that will preform an additional action. I would like to use this as a way to create an additional menu that can be accessed that way. This canvas example is then not really a game, or animation, or anything to that effect, but I am just focusing on making a simple user interface type thing.

3.42 - pop the lock game clone

A Canvas Example that is a pop the lock game clone, the game is very easy to clone so it is a great getting started example. It just involves a circle that moves along the circumference of another circle and the player needs to click or tap the screen when the moving circled gets in a certain range or else they loose. So the general idea of the game is very simple, yet very addictive, so of core I made a quick clone for what it is worth.

I made the rules and behavior a little different, but this canvas example is the same very general idea of the pop the lock game. Future ideas for the game if I put more effort into the code would include more than one game mode, and maybe some flashy yest simple animations.

3.43 - space shooter

A Canvas Example of a space shooter type game where there is a ship that moves around on the canvas that shoots at other ships. This is just another general basic idea that is in a kind of alpha state as of this writing. It is also the very first canvas example that I started with, so the source code is in a state that I would not write at this time. If I do get around to putting some more time into this game, it might be to just add some menus and improve the controls a little, I can not see this ever being anything to ground breaking really. I just wanted to get a basic idea together with something that that was more or less it.

3.44 - Stars

I use to have a thing about drawing stars in all kinds of different ways so of course I have a Canvas Example on that. I keeping come back to this one each time I want to just draw stars and go from there when it comes to just being creative and having a little fun with canvas and javaScript for once.

The example makes use of a module that pulls the data state of what a star is away from how to go about drawing one. So this is not an example where I have a draw star method that will just draw to the context with some arguments, but rather it is a module that will create a star as an array of points. The array of points is then pass to a simple draw points method.

I am also playing around with all kinds of other features and topics that have to do with canvas projects here, such as object pools, moving an object by way of system time, alpha transparency, and more. This is also an example that I keep coming back to a little ore so than other canvas examples so it is of half way decent quality all ready. Also there is only so much more that comes to mind when it comes to a canvas example that is just about drawing stars to a canvas.

3.45 - State machines

State machines are an important component for many javaScript projects so of course I have a Canvas Example on state machine in general. This is one attempt of coming up with some kind of standard for this sort of thing, but I often still kind myself making this kind of thing all over again each time.

3.46 - Turret defense

Turret defense type games are sometimes a little fun for a while so I have a Canvas Example on that in general. There are games that are tower define type games, but then there are games where there is just a single turret at the center of the canvas and there are enemies moving in to the center to attack. I did not put much time into this one thus far though. The basic general idea is there though for what that is worth, I just did not get around to building much on top of that.

4 - Conclusion

I will of course be updating and expanding this list as I continue to make additional canvas examples, as well as improve the quality of the examples and the content that I have written about them in the process of doing so. Thus far I have been trying to get a build of each example embedded into each post which of course should have been the case from the beginning.

I might start to put in at least a little time each day, and for now I think the focus should be to improve what I have worked out all ready rather than continuing to make additional canvas examples, at least for now anyway. I do have many other topics on this site that I write about, and I have a lot going on in real life also, so progress might not move along as fast as i might like it to with this. So I should try to get a better sense of what examples should get more attention than others, some of these are starting to look like a finished product that might just need a little more done, while others are far off from that point.