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().

Series Navigation<< HTML5 Canvas: Drawing a line in the canvas
HTML5 Canvas: Drawing and styling a rectangle or square in a canvas >>

Leave a comment

Leave a Reply