45 Canvas examples and counting, animations, games, modules, and more.

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 in detail.

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, and link back to this index post in each canvas example post. 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. However 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 lets face it canvas is a great example of fun and exciting javaScript rather than boring yet practical javaScript. 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.21.0 of cross hairs one of many other works in process when it comes to canvas examples.

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 I might be will to except helpful changes that improve quality. However this is mostly still my project, and I assume that may 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.

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 - 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 flys 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.2 - 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.3 - 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.

3.4 - 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.5 - 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.

3.6 - 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.7 - 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 cousre 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.8 - 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.9 - 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 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.

3.10 - 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.

3.11 - 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.12 - cross hairs!

A game about a cross hairs object that you can move around and do damage to things.

3.13 - 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.

3.14 - 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.15 - 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.16 - 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.

3.17 - 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.

3.18 - 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.19 - 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.

3.20 - 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.

3.21 - 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.

3.22 - Grass blades

Just some grass blade type things.

3.23 - 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.24 - grid defense

A grid defense style game prototype.

3.25 - Monster Smash

A monster smash RPG style game idea

3.26 - 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.

3.27 - Grid world simulator core

A start with what might become a world simulator type canvas example thing like that of Sim Earth.

3.28 - Hyper casual space Shooter

This is another hyper causal game where the player can just fly around and blast blocks.

3.29 - Hyper casual to the black

My first canvas example of a hyper casual game where a ship just keeps moving out into space.

3.30 - 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.

3.31 - 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.

3.32 - input controller

An input controller concept for canvas projects.

3.33 - kill box

This is a canvas exmaple idea that is not done yet, but I started a post on what I have thus far.

3.34 - Map scrolling

In this canvas example I worked out a basic example of getting scrolling working with a large grid.

3.35 - 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.

3.36 - 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. The result is a somewhat interesting visual effect.

3.37 - search and destroy particles

Search and destroy particles.

3.38 - percent values and Math log

A simple canvas example that shows graphically what a method I work out does with a percent value.

3.39 - 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.

3.40 - 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 by way of a pointer start point and distance to a current point.

3.41 - 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.

3.42 - space shooter

A Canvas Example of a space shooter type game.

3.43 - 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.

3.44 - 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.

3.45 - Turret defense

Turret defense games are sometimes nice so I have a Canvas Example on that in general.

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.