14 Sep

Canvas Development Part 1: The Basics

spaceinvader

The Canvas element is a HTML5 element which can be used to draw and display visual graphics on the fly using Javascript. It is becoming increasingly used in games and apps, as well as webpages and web applications.

In Part 1 of this Canvas Element Tutorial Series, we’ll explore the basics of canvas development – getting a canvas onto the page and simple drawing and manipulation of the canvas.


Getting Started: A Blank Canvas

The HTML5 Canvas element tag should be defined with an id (for targetting via our JS), and optionally with width and height attributes and classes.. such as:

The canvas itself is an empty container without any border, background colour or content, and is 300px wide and 200px tall. To even see that it exists, we’ve added some CSS to give the canvas a background colour, and center it horizontally.

That gives us our blank canvas.. a dark grey empty rectangle. Nothing exciting yet, until we do something with it via javascript.

You are not limited to having one canvas on a page either, you can have multiple and can even position/layer them above each other using CSS positioning and z-index.

Canvas Context

We have the canvas element on the page, but in order to do anything with it we need to get the Context of the canvas.  The Context is an object relating to that canvas, and has a number of methods (ie: the HTML5 Canvas API) available for us to work with.

This shows how we can get the canvas element, and the 2d context of that element:

2D Drawing Basics

When working with the Canvas API, coordinate values are specified as x, y.  x being the number of pixels horizontally from the left edge, and y being the number of pixels from the top edge. Colour values are expressed in standard web colour formats such as hex values or colour names (eg “#33CC33” or “green” are valid values).

RECTANGLES

If we want to draw a orange rectangle shape onto the canvas, we’d use the 2d context to set our desired colour using the fillStyle property, then call fillRect() to draw a rectangle using the set colour.  The fillRect() method  takes 4 parameters to  give us control of the position and size of the rectangle to be drawn:

fillRect(x1, y1, x2, y2)

x1 and y1 and the horizontal and vertical coordinates of the top left corner of the rectangle, and x2 and y2 are the bottom right corner coords.

Say we want to draw an orange rectangle which is 100px wide and 50px tall, and positioned 20px from the top and 5px from the left edge, that would equate to:
Top Left Corner:  x1 = 5, y1 = 20
Bottom Right Corner:  x2 = 105, y2 = 70

Our JS would look like:

Similarly, if we had wanted to draw just the orange border of a rectangle (no fill), we could instead use the strokeStyle property and strokeRect() method to do so, and they take the same parameters as fillStyle and fillRect.

LINES

We can draw straight lines onto a canvas using these 2 methods:

  • moveTo(x, y) – set current position coordinates
  • lineTo(x, y) – draw line from current position to these coordinates.

However we can call these 2 methods as much as we like, but nothing will actually be visible on the canvas until we tell it to set some ink to those lines.  We can do this by setting the strokeStyle property to our desired colour,  then calling stroke() method. You could also give the line a width by setting the lineWidth property.

Here’s a quick example to draw an orange line from the top left corner of the canvas, to a point 80 pixels from the left edge and 40 pixels from the top edge  (giving us x1=0, y1=0, x2=80, y2=40):

A single line by itself isn’t overly interesting to show you, so let’s extend on the above code to create a loop where we draw an orange  line from the top left corner of the canvas, to 10 pixel intervals along the right edge and also along the bottom edge.

See the Pen zAhwJ by code peach (@codepeach) on CodePen.

Feel free to click the JS tab on the preview above to view and play with the code.

CIRCLES & SEMI-CIRCLES

To draw a circle or semi-circle/arc onto a canvas, we can use the arc() method:

arc(x, y, radius, startAngle, endAngle, anticlockwise)

The x and y parameters are the coords for the centre point of the circle. The radius parameter sets the size of the circle/arc in pixels. The startAngle and endAngle parameters are the start and end points of the arc/semi-circle/circle in radians (not degrees!), measured from the x axis. If you work with degrees, you can convert degrees to radians using:

radians = (Math.PI/180)*degrees
(source: MDN)

The final parameter, anticlockwise, is a boolean and dictates which direction the arc should be drawn in, if this is true it is drawn anticlockwise, and vice versa.

The arc() method is similar to the lineTo() method, in that it’s treated as a “path” and isn’t visible on the canvas until we apply some ink to it using stroke(), or fill it with fill(). When creating paths we should first call beginPath(), to start a path or reset the current path.

To show how it’s done, let’s draw an  orange circle outline 10px wide(stroke), with a radius of 90px,  with the centre of the circle positioned 100px from the top and left edges of the canvas:

Which looks like:

See the Pen upsgG by code peach (@codepeach) on CodePen.

If you wanted to fill the circle also, set the fillStyle property to the colour of your choice, and call the fill() method after you have called arc(). If you wanted the circle to be a solid fill only with no outline/stroke, call fill() and don’t call stroke().

Text on Canvas

The Canvas API allows us to add single lines of text to a canvas at specified coordinates, using either of the following methods:

  • fillText(“text”, x, y)
  • strokeText(“text”, x, y)

The text is drawn using the colour that is set in either the fillStyle or strokeStyle properties.

The font, font size, font weight and font style to be used can all be set using the font property, using the same syntax as CSS. Text alignment can also be defined by setting the textAlign property, using one of the following values: start, end, left, right, center.

Here’s an example to show how to draw 3 different lines of text with different font styles onto a canvas:

Which gives us:

See the Pen text on canvas example by code peach (@codepeach) on CodePen.

Gradients

In our canvas examples so far we’ve shown how to draw things using a solid fixed colour. The canvas API also gives us the option of creating and using linear and radial gradients, with multiple “colour stops” which define the colours to fade between within the gradient, and their position (between 0 and 1) within the gradient.

To better describe colour stops, let’s say we want a gradient that starts blue, fades to green in the middle, and red at the end, it would have the following colour stops:

  • Position: 0.0,  Colour:  #0000FF  (blue)
  • Position: 0.5, Colour:  #00FF00  (green)
  • Position: 1.0, Colour:  #FF0000  (red)

To create a linear gradient, we use:
createLinearGradient(x1, y1, x2, y2)

The x1/y1 and x2/y2 define the start and end coords for the gradient. For a horizontal linear gradient that is to run from left to right, y1 and y2 should be the same value. For a vertical linear gradient that is to run from top to bottom, x1 and x2 should be the same value.

Once we have created the gradient object, we can call a method on that object to define our colour stops:
gradient.gradient.addColorStop(stop, colour);

The stop parameter values should be between 0 and 1, representing the start and end of the gradient. Once we’ve defined our colour stops, we’re ready to apply the gradient to any fill or stroke styles we wish to apply the gradient to (such as shape fills, text fills, circle stroke outlines, etc).

As an example, we will draw a rectangle 200px wide and 100px high, filled with a horizontal linear gradient fading between orange at the left, to dark grey in the centre, and back to orange at the right:

The result:

See the Pen canvas linear gradient example by code peach (@codepeach) on CodePen.

Radial gradients can be created using:
createRadialGradient(x1, y1, r1, x2, y2, r2)

x1/x2 define the coords of the starting circle of the gradient, and r1 is the radius of that starting circle. x2/y2 are the coords of the ending circle of the gradient, with r2 being it’s radius.

Let’s jump into an example, we’ll cover a 200px x 200px canvas with a rectangle, filled with a radial gradient. We’ll give it a yellower orange centre, fading to a darker orange and then out to dark grey outside of the canvas. By setting the outer/ending circle of the gradient to outside of the canvas, we ensure that every part of the canvas has some orange.

See the Pen canvas radial gradient example by code peach (@codepeach) on CodePen.

Conclusion

We’ve covered the basic introduction to the world of Canvas development, and how to draw some basic things onto it.  Stay tuned for the next parts in this series as we’ll be covering:

  • Shadowing
  • Patterns
  • Animating objects
  • Rotation and scaling
  • Transforming objects
  • Loading Images into the canvas
  • Pixel level manipulation
  • Canvas Mouse and Touch Events
  • External libraries for canvas development

We hope you’ve found this tutorial useful, and welcome your feedback and any questions you may have in the comments below!

Space Invader photo by: FabianOrtiz 

Related Posts