There is a whole bunch of methods for drawing to a canvas element when it comes to drawing lines and shapes, as well as rendering an image to the canvas, and even working with raw image data.
I have wrote a lot of posts on the canvas element then, from getting started posts, to posts on various properties and methods in the 2d drawing context API, to full canvas examples of games, animations, and so forth. So it was only a matter of time until I made a main blog post of sorts that will act as a center point for all things canvas related on this github pages site of mine here.
1 - Getting started with canvas
Once you have a reference to a canvas element, you can then use the getContext method of the canvas element to get a reference to the 2d drawing context of the canvas element. With this context API it is then possible to now draw to the canvas with a whole much of drawing methods, and properties.
1.1 - A simple copy and past black screen canvas example
So there you have a very basic canvas example that just involves creating an injecting a canvas element into a web page. I just created an canvas element, appending it to the body element, set the width and height, set fixed positioning for it via the style API. I then usd the fill style property, and the fill rect method to draw a black rectangle from the upper left corner of the canvas to its with and height to just make a blank black canvas.
1.2 - A Still somewhat Simple HTML copy and paste example of a canvas animation
So now for something just a little more involved then the blank canvas example. Here I have a canvas example that does a little more then just create and inject a blank black canvas element, it is a simple animation of a circle moving around in a circle like pattern. I know it is not the most interesting of canvas examples, but this is the getting started section of my main canvas post so I just need to get this one out of the way here. Also in the process of going over it I will also be touching base on a whole much of little topics that have to do with canvas so maybe reading this is not a waste of time after all.
In the have a draw method that will be used to draw the current state of this state object to the canvas. In real projects this draw method will often become a draw module of sorts with many draw methods for drawing all kinds of aspects of a far more advanced module that is more than just a circle moving around in a circle.
The example also has a main app loop method that makes use of the request animation frame method as a way to make such an app loop. In this app loop I am updating the model, and then drawing the model to the canvas element.
So We have went over many of the basic here then when it comes to working with canvas elements. There is creating and injecting a canvas. There is creating a state object of some kind, and then having methods that are used to update that state. There is having a method to draw that state to the canvas element, and then there is having a main app loop. I still did not cover everything when it comes to the basic of canvas just yet though. There is of course adding events to have a way to make it so that canvas responds to user input of course, and there is a whole world of drawing methods other that fill rect, and the various methods I used to draw the circle. However maybe that is good for a getting started with canvas section in this post at least.
2 - User input and canvas
I will not be getting into user input and canvas in detail here, as I have wrote a lot of other posts where that was the main focal point of the content. However I think that it is called for to at least go over a basic copy and past example of user input and canvas here, and maybe a bot more then that if I get around to it.
2.1 - A simple mouse event example
A good starting point with user input and canvas might be to get into mouse events if working in a desktop operating system environment, and more often then not I assume that is the case.
The basic idea here is to just attach an event hander to the canvas element using the addEventLsitener method, passing a mouse event type such as mouse down as the first argument, and then a function that will fire each time that event happens as the second argument. In the body of this function and event object will be passed, and this event object will contain useful properties like clientX, and clientY with mouse events that contain the position where the mouse down event happed. However the values will be window rather than canvas relative, so a method like getBoundingClientRect must be used off a reference to the canvas element, and that can be used as a way to adjust the window relative values to get a canvas relative value.
There is more to it when it comes to getting a canvas relative position in general that will work with both mouse and touch events in general. When it comes to that though I have wrote a post on getting a canvas relative pointer position where I get into this topic in detail.
So mouse events are easy to get up and running with right away, but there is more to pointer events in general when it comes to working out a user interfaces. I have wrote a canvas example post that has to do with creating an object that serves as a way to pan around a map of sorts that might be worth checking out when it comes to gaining a better understand of mouse events, touch events, and input in general. However I think that might be about it for now when it comes to touching base on this topic here when it comes to the basics of user input at least.
3 - Conclusion
So that is just about it for now at least when it comes to writing about canvas in general. There is much more to write about when it comes to canvas of course, but that is all broken down into many other posts on the canvas element here on my site. I have been putting a lot of time into this collection of content, so you can rest asure that I will come back to editing this post as my collection of content grows and there is more that comes to mind that I feel is worth mentioning here.
From here on out if you are new to canvas, or have been fiddling with it for years and are just at a loss for what to do next the best thing to do is to just start working on your own projects. I have wrote a main post on my collection of canvas examples that I have been doing an okay job of keeping up to date as I expand my collection of canvas examples. Maybe that would be a good starting point when it comes to gaining some inspiration for project ideas if you do not have many.