Monday , 20 November 2017
Home / Programming / JavaScript / Canvas – Advanced JavaScript Tutorial
Canvas
Canvas

Canvas – Advanced JavaScript Tutorial

Since the introduction of HTML5, the <canvas> tag has grown a great amount of popularity. The <canvas> element allows you to draw graphics onto the document with JavaScript.

To get started, let’s update our document to this.

The very first thing we must do is create <canvas> tags. This is where all our graphics will be placed. You MUST set a width and height. We do this with CSS.  If you don’t, then the canvas won’t work.  We also add a border so we can see our canvas. You don’t need to do that, but it’s helpful to see where your drawings will appear.You’re allowed to input regular HTML and text inside the <canvas> tags. They will only display if the user’s browser doesn’t support the <canvas> tags.  In our document, we inform the user they need to upgrade their browser in order to view the canvas properly.

Clear out your script and add this bit of code.

We grab our canvas like we would any other HTML tag and store in a variable called canvas. We then check if this object has a method called getContext(). By doing this we get to check 2 things. The first is to check if we’re actually grabbing a canvas. Only canvases will have the getContext() method. The second is to check if the browser supports canvases. The getContext() method will only be available for browsers that support canvases. We kill 2 birds with 1 stone in this conditional statement.

If all check outs, then we create a variable called context that will hold the value returned by the getContext() method. So, what does the getContext() method return? This method will simply return a drawing object. This drawing object will contain methods and properties we can use to draw in the canvas. The kind of drawing object we’ll get depends on the type we pass in.

In our case, we pass in the string 2d. This will tell the getContext() method to grab a 2D drawing object. Let’s get started with drawing stuff now!

Fills & Strokes

Before you start drawing objects, you first should set the fill and stroke of that object. The fill is the color inside the drawing and the stroke is the border around that drawing. You can change those colors with 2 properties. Let’s update our conditional statement to this.

In the above example, I set the color of the fill to red and the stroke to green. The fillStyle property represents the fill color and the strokeStyle property represents the stroke color. There are various ways you can set the color. You can use the name, hex code, RGB, RGBA, HSL, or HSLA. In the above example, I use hex code and RGBA. To keep things simple, I’ll be using hex code for any color changes I make.

Rectangles

The first object we’ll learn to draw is a rectangle. A very basic shape.  Add this bit of code at the end of your conditional statement.

We use a method called the fillRect() method. This method simply draws a rectangle into your canvas. This method has 4 parameters. The x position, y position, width, and height. All of them are measured in pixels.  Let’s create 2 more rectangles. Add this bit of code next.

Refresh your page and you should see 3 rectangles. To make the rectangles have different colors, then you just update the fillStyle and strokeStyle properties like so.

Let me clarify what’s going on here. First, we set the fill color to red. Any drawings created will have this fill color. When we create the rectangle, it’ll have the fill color red. We then update the fill color to green. Any drawings created before this setting was updated won’t be affected. It’s only drawings that are created after this property that are affected.

This method will only draw a rectangle with the fill color. If you want to draw a rectangle with the stroke color, then you use the strokeRect() method. Let’s update our conditional statement to this.

We’re pretty much doing the same thing as before. Except we change the strokeStyle property each time. The strokeRect() method has the same 4 parameters as the fillRect() method. The process is similar, but with different results.

You can also set the width of each stroke with the lineWidth property. Let’s update our code to this.

You’ll notice that I have comments in here to separate each drawing. It’s really helpful to keep your drawings organized. You can refresh your page and you should see the results of each drawing.

Lastly, you can actually clear an area or rectangle with the clearRect() method. Add this line of code at the end of your conditional statement.

If you refresh your page, then you should notice we only clear half of our rectangle. Well first, let me explain what this method does and then I’ll explain why that happens.

The clearRect() method creates a rectangle that makes any area it covers transparent. It’s kind of like white out. It draws over any objects , but doesn’t necessarily remove it. This method has the same 4 parameters as the fillRect() and strokeRect() methods. When it comes to strokes, the values are actually split in half. So for example, let’s say I had a line width of 4 pixels. When JavaScript draws the rectangle, then the stroke will be drawn 2 pixels inside and 2 pixels outside. So the width of our rectangle is the width we set plus half of the width of the stroke. This is why our clearRect() method doesn’t cover up our rectangle completely. To clear it up completely, update it to this.

We have successfully cleared out our first rectangle.

Conclusion

There are so many more things we can do with the canvas. In the next couple of tutorials, we’ll take a look at more awesome things we can draw. For more information on the canvas tag, then go here.

https://developer.mozilla.org/en-US/docs/HTML/Canvas

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link