Getting started with canvas basics
1 - Getting started with Canvas basic example
Whenever I start a new canvas project with plain old vanilla js, I often start with something like this.
This results in just a simple black screen that has a actual native matrix width of 320, and a height of 240 pixels. A typical starting point for any vanilla js canvas project of mine when it comes to just getting the bsics of what the project are off the ground at least. When I mean native size what I really mean is the actual with and height of the canvas in terms of the dimensions of the 2d matrix, not any kind of scaled width and height that can be set with css via the style api or any other means to set css rules for a canvas element.
So far I am just using the fill style property to set the fill style of the canvas to black, and then using the fill rect method to fill the canvas with the color black. From here on out it is just a matter of getting used to all the other context properties and methods that there are to work with when it comes to rendering at least.
So far I am not doing much of anything when it comes to having what is often called a model that contains display objects, and other data that may be rendered to the canvas by various means. In addition I am not doing anything with event attachment, or a main app update loop power by requestAnimationFrame for that matter. However you have to start somewhere, and just having a blank black canvas is one such starting point.
2 - Actual size vs scaled size
There is the actual width and height of a 2d matrix, and then there is the scaled width and height of the canvas I try to avoid calling theme pixels because in most cases that it not the case when getting into the deep of it when it comes to actual hardware pixels, screen resolution, scaling, and so forth. Often you might hear the term logical pixels used as a way to describe the difference between the two.
3 - Having a one or more draw methods
After having the basic blank black canvas worked out, and the issue of native and scaled canvas size in order, it’s now time to do some actual drawing on the canvas. For this example I will just be drawing a white circle in the center of the canvas element using the canvas arc method along with the begin path and stroke methods.
This time I will start pulling some code into functions as a way to keep this a little better organized. There is yet even more that can be done when it comes to not just puling code into functions, but also into modules, and in other files. However for now I will just be making some functions, and pulling code that has to do with setting things up into a setup function, code that has to do with drawing the the circle into a draw function, and also have a CLS or clear screen helper function also.
So now I have pulled things into functions, you do not have to do this of course, but it does help to keep things compartmentalized, and as a project grows I might be calling certain methods more than once that allows for be to reduce the volume of code that is being repeated.
For now I am just using ctx.strokeStyle, ctx.beginPath(), ctx.arc, and ctx.stroke to draw a circle on the canvas. There are of course ways to go about drawing images from external files, or another canvas, and many other topics, but for now I just want to keep things simple. This is a getting started post on canvas after all.
The begin path method is how to go about starting out with drawing lines with canvas, there are many other options other than the canvas arc method such as move to and line to. I will not be getting into drawing lines in detail here as I have wrote another post on canvas lines in which I do this topic a greater deal of justice. Still for a getting started post on canvas I should at least start to touch base on this one at least so lets get to it.
In real projects I go as far as having full draw modules that are collections of draw methods that draw everything that has to do with the canvas project. There is also having yet another module that has to do with creating a state object that can then be used with a draw method as a way to pull view and model apart from each other.
4 - Throwing in the loop method.
Now it’s time to start getting into doing something fun with canvas. In this section I will be pulling everything together above and adding in a loop method that will be called over and over again. Just about all canvas project will involve some kind of main update loop, or will be event driven when it comes to the way that the content of the canvas will be updated.
So not I am putting together an object that contains values, and so far a single update method. Often I end up going in some kind of direction in which I try to separate a model or sorts from the way that it is being rendered. There is also now a loop method that keeps getting called over, and over again, that updates the model, and draws the current state of that model.
5 - requestAnimationFrame, setTimeout, and setInterval
With a canvas project it is best to use requestAnimationFrame over setTimeout, or setInterval. Getting into the reasons why is a whole new post in itself, but for the most part the only reason why you might want to use setTimeout is if you want to push backward compatibility back farther. For the most part I would say that you do not have to worry about that these days though.
6 - Conclusion
I have not even mentioned layering, event attachment, how to go about exporting animations that you make, and a wide range of other topics on canvas. Still I hope that this post may get you interested in canvas at least, as it can become very fun to play with.
Be sure to check out my other posts on canvas.