When it comes to canvas projects and using images most of the time that means knowing a thing or two about how to use the drawImage 2d context method that can be used to render all or part of an image that has been loaded before hand. However that is just it, the image needs to be loaded first, this alone can complicate matters when it comes to making a vanilla javaScript canvas project. As I now need to think about how to go about loading images, before continuing into another state of the project where it is safe to go ahead and use those external assets that must be loaded first.

So I find working with external assets a little bit of a hassle, unless I use a framework to make quick work of loading image assets I end up spending a lot of time working on making a loader, and other aspects of a canvas framework of sorts rather than working on what makes my project truly original. So with that said there are other ways of creating and working with images in canvas as well, some of which do not need an external resource loaded first.

Still sometimes I just want or need to work with extremal sprite sheets, and other image assets, so in this post I will be going over the use of the draw image method, on top of other canvas image related topics that have to do with drawing with javaScript code rather than a static external image asset.

Read More

There is the canvas scale in the sense of how much the canvas element is scaled relative to its actual native size as one thing that comes to mind when it comes to the issue of scale and canvas elements. There is also the scale context method as well when it comes to scaling objects within the canvas element. However there are many other things that come to mind when it comes to the topic of scaling, and the use of canvas elements in a javaScript project.

So in canvas a scale could mean a few things as there is the actual canvas matrix size, then the size that the canvas is scale up or down to just like that of an image. There is also scaling an object up and down within the canvas matrix also, so the subject can get a little confusing to say the least. Still in this post I will be writing about all things canvas scale related and hopefully it will help with some of the confusion.

Read More

When making a canvas project with the html 5 canvas element and javaScript there is a built in canvas arc method in the 2d drawing context that can be used to draw arcs and circles. Being able to draw circles and arcs is one of several basic shapes that a javaScript developer should be able to draw when working something out with a canvas project, and the canvas arc 2d drawing context method is the standard typical solution for doing so.

Drawing arcs and circles in canvas is important not just for the sake of drawing graphics, but to also get an idea where a certain range is from a given point outward to a certain radius that can be helpful sometimes with debugging things. There is also knowing how to go about positioning things in an arc like pattern though, and braking away from the convenience of the canvas arc method, to get into more complex alternatives that center around creating an array of points that are placed in an arc like pattern around a given center point. In other words there is not just using the built in canvas arc method to draw arcs, but to create an array of points and then just draw that.

So the canvas arc method can be used as a way to quickly draw circles and arcs in a canvas project, however there are also many other related topics to canvas arcs also such as the nature of radians, Math.cos, and Math.sin. In this post I will be covering what there is to be aware of when it comes to the canvas arc method and other related topics in client side javaScript and the 2d canvas drawing context so lets get to it.

Read More

When learning how to work with the javaScript canvas element and the 2d drawing context for the first time the subject of drawing lines is one thing that should be well understood before moving on to more complex canvas related subjects and working making some canvas examples and actual projects that people might want to use.

In this post I will be quickly covering many of the basics about drawing lines with canvas and javaScript, including the lineTo and moveTo methods of course for starters. There are many other methods of interest in the 2d context when it comes to drawing lines though such as the canvas arc method for example. However maybe getting into that in detail at least is a matter for another canvas post.

I see lots of code on the web that has to do with drawing canvas lines by way of working out the logic for the line, and drawing at the same time. Maybe this is not always such a bad thing, but for the most part I seem to like working out an array of points, and then just have a generic draw points method. There is always more than one way of doing the same thing, but in nay case lets get into drawing lines with canvas and client side javaScript.

Read More

The try catch statement in javaScript is one way to go about preforming error handling when developing some javaScript code. The use of a try catch involves placing one or more statements of javaScript code in a try block that might cause an Error in some situations. In the event that an error does happen some additional javaScript in a catch block that follows the try block will be called, and an error object will be present in this catch block to help with the process of handling the error.

The try catch statement is not a one stop solution for all Error handling tasks when it comes to working with Errors in javaScript, but is certainly one aspect of doing so along with other aspects of this sort of thing. Other things to be aware of are error objects in certain callback functions that need to be handled differently typically with if statements. When it comes to promises another thing about error handling is when working with catch function calls with promise chains which is yet another kinds of Error handling. Still the javaScript try catch statement is a good starting point when it comes to this topic.

So then with that said in this post I will be outlining some things to know about when working with the try catch statement, as well as any additional things that might come to mind that relate to try catch, and error handling in javaScript.

Read More