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'>
    <meta charset='utf-8'>
    <title> Canvas Line</title>
        canvas {
            border: 1px solid #000;
<canvas id='myCanvas' width='640' height='480'></canvas>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.moveTo(0, 0);
    canvas.lineTo(640, 480);

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