HTML5 Canvas: Introduction

This entry is part 1 of 17 in the series HTML5 Canvas

In 2004, Apple developed a pixel-based drawing element named canvas for the Mac OS X dashboard that was later employed in the Safari Browser.

The HTML5 specification has adopted this element and its associated set of APIs to provide basic drawing functionality.

The canvas element or the <canvas> tag gives you a blank surface (thus the name canvas), which you can use to render graphics, images, and text dynamically.

The <canvas> element has the standard attributes of an HTML element. Minimally, you will need the id, width, and height attributes.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<html>
<body>
  <canvas id='myCanvas' width='640' height='480'></canvas>
</body>
</html>

HTML5 Canvas: Drawing a line in the canvas

This entry is part 2 of 17 in the series HTML5 Canvas

To draw on the canvas from JavaScript, you first must grab the context of the canvas id you want to draw on.

To do this, your script will get the canvas element by id and then use getContext to grab a reference to the canvas element’s two-dimensional context.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas Line</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='myCanvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.moveTo(0, 0);
    canvas.lineTo(640, 480);
    canvas.stroke();
</script>
</body>
</html>

 

HTML5 Canvas: Canvas tools

This entry is part 3 of 17 in the series HTML5 Canvas

The canvas tools provide a basic set of tools from which you can create a wide range of simple and complex shapes on the canvas.

  • Rectangle: Draws a rectangle at a specific location with a specific width and height
  • Line: Creates a line from point A to point B
  • Path: Creates a path using one or more lines or curves
  • Arc: Creates an arc given particular dimensions and employed to also create circles
  • Curve: Creates one of two types of curves: Bezier or Quadratic
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas Line</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='myCanvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.moveTo(0, 0);
    canvas.lineTo(640, 480);
    canvas.stroke();
</script>
</body>
</html>

Here we draw a line using a solid stroke by using canvas.stroke().

HTML5 Canvas: Drawing and styling a rectangle or square in a canvas

This entry is part 4 of 17 in the series HTML5 Canvas

Using fillRect(pos-x, pos-y, width, height), we can draw a rectangle or square.

This next example will create a 100 pixel by 100 pixel square and place it in the top-left corner
(0,0) of the canvas

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas rectangle</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='myCanvas' width='640' height='480'></canvas>
<script>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.fillStyle='red';
    canvas.fillRect(0, 0, 100, 100);
</script>
</body>
</html>

The canvas.fillStyle=’red’ will fill the square red.

HTML5 Canvas: Line tool and coordinates

This entry is part 5 of 17 in the series HTML5 Canvas

Using the same line tool, we draw a horizontal line across a 500 by 500px square.

We first position the starting point of the line at (0,250) using moveTo and draw the line using lineTo.

We must keep in mind that the (0,0) point is located in the top left corner of the canvas by default, with the X value increasing as you move right and the Y value increasing as you move down.

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>Codecrawl.com: Canvas Line</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas id='myCanvas' width='500' height='500'></canvas>
<script>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.moveTo(0, 250);
    canvas.lineTo(500, 250);
    canvas.stroke();
</script>
</body>
</html>