Implementing graphics with HTML5 Canvas

Using the <canvas> element

The <canvas> webpage element provides a blank canvas on which you can draw dynamically lines, text, and images on the canvas and manipulate them with JavaScript.

To add a canvas to your page declare the <canvas> element similar to the <div> element. The following code is a container for graphics using <canvas> element:

<head>
    <style>
        canvas {
          border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="drawingSurface" width="600" height="400">
    Your browser does not support HTML5.
    </canvas>
</body>

If the user’s browser doesn’t support the <canvas>element, you can place fallback text inside the <canvas> to be displayed in its place.

The coordinates for drawing on the canvas are always based on the coordinates within the canvas itself, where the top-left pixel is (0,0).

To work with canvas through code you need to get a reference to it in your JavaScript. the following code get a reference:

window.onload = function () {
    var drawingSurface = document.getElementById("drawingSurface");
    var ctxt = drawingSurface.getContext("2d");
}

If the user’s browser doesn’t support the <canvas>element, you can place fallback text inside the <canvas> to be displayed in its place.

The coordinates for drawing on the canvas are always based on the coordinates within the canvas itself, where the top-left pixel is (0,0).

To work with canvas through code you need to get a reference to it in your JavaScript. the following code get a reference:

window.onload = function () {
    var drawingSurface = document.getElementById("drawingSurface");
    var ctxt = drawingSurface.getContext("2d");
}

You get a reference to your canvas element followed by a reference to a “2d” context. Having acquired a reference to the context, you can start to look at the various methods for drawing on your canvas.

Drawing <canvas> lines

You can draw lines on the canvas with the 2d context object you are referencing. The context object provides the following methods:

Method	Description
beginPath	Resets/begins a new drawing path
moveTo	Moves the context to the point set in the beginPath method
lineTo	Sets the destination end point for the line
stroke	Strokes the line, which makes the line visible

The following code produces a line across the canvas:

<head>
<style type="text/css">
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
    <input type="submit" onclick="line()" value="CANVAS LINE" />
    <canvas id="drawingSurface" width="600" height="400">
        Your browser does not support HTML5.
    </canvas>
<script type="text/javascript">
    var line = function () {
        var drawingSurface = document.getElementById("drawingSurface");
        var ctxt = drawingSurface.getContext("2d");
        ctxt.beginPath();
        ctxt.moveTo(10, 10);
        ctxt.lineTo(225, 350);
        ctxt.stroke();
    }
</script>
</body>

You can continue drawing more lines by adding more lineTo methods. The lineWidth property accepts a value that determines the line width.

The strokeStyle property lets you change the line color. This property accepts style formats including hexadecimal values or named colors.

The following code demostrates this:

<script type="text/javascript">
    var lines = function () {
        var drawingSurface = document.getElementById("drawingSurface");
        var ctxt = drawingSurface.getContext("2d");
        ctxt.beginPath();
        ctxt.moveTo(10, 10);
        ctxt.lineTo(225, 350);
        ctxt.lineTo(300, 10);
        ctxt.lineTo(400, 350);
        ctxt.lineWidth = 5;
        ctxt.strokeStyle = '#0f0';
        ctxt.lineCap = "round";
        ctxt.stroke();
    }
</script>

Ads Right