HTML5 Canvas: Introduction

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'>
    <meta charset='utf-8'>
    <title> Canvas</title>
        canvas {
            border: 1px solid #000;
  <canvas id='myCanvas' width='640' height='480'></canvas>

Series Navigation
HTML5 Canvas: Drawing a line in the canvas >>