要在Web上创建图形应用程序，HTML-5提供了丰富的功能集，例如2D Canvas，WebGL，SVG，3D CSS转换和SMIL.要编写WebGL应用程序，我们使用HTML-5的现有canvas元素.本章概述了HTML-5 2D画布元素.
HTML-5 < canvas> 提供了一个简单而强大的选项，可以使用JavaScript绘制图形.它可以用来绘制图形，制作照片合成，或者做简单(而不是那么简单)的动画.
这是一个简单的< canvas> 元素只有两个特定属性宽度和高度加上所有核心HTML-5属性，如id，name和class.
下面给出了HTML canvas标签的语法.你必须在双引号("")中提到画布的名称.
< canvas id ="mycanvas"width ="100 "height ="100"></canvas>
canvas标签有三个属性，即id，width和height.
Id : Id表示文档对象模型(DOM)中canvas元素的标识符.
宽度 : 去;宽度表示画布的宽度.
高度 : 高度表示画布的高度.
这些属性决定了画布的大小.如果程序员没有在canvas标签下指定它们，那么默认情况下，Firefox，Chrome和Web Kit等浏览器会提供大小为300及以上的画布元素; 150.
以下代码显示如何创建画布.我们使用CSS为画布赋予了彩色边框.
<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height = "100"></canvas>
</body>
</html><canvas>最初是空白的。 要在canvas元素上显示某些内容，我们必须使用脚本语言。 该脚本语言应访问渲染上下文并在其上进行绘制。
canvas元素具有一个称为getContext（）的DOM方法，该方法用于获取渲染上下文及其绘图功能。 此方法采用一个参数，即上下文2d的类型。
下面的代码将被编写以获得所需的上下文。 您可以如下所示在body标签中编写此脚本。
<!DOCTYPE HTML>
<html>
<body>
<canvas id = "mycanvas" width = "600" height = "200"></canvas>
<script>
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.font = '20pt Calibri';
context.fillStyle = 'green';
context.fillText('Welcome to Tutorialspoint', 70, 70);
</script>
</body>
</html>在执行时，以上代码将产生以下输出:
有关HTML-5 2D画布的更多示例，请查看以下链接HTML-5画布。
HTML5 Canvas也用于编写WebGL应用程序。 要在canvas元素上创建WebGL渲染上下文，您应该将字符串Experimental-webgl而不是2d传递给canvas.getContext（）方法。 一些浏览器仅支持" webgl"。
<!DOCTYPE html>
<html>
<canvas id = 'my_canvas'></canvas>
<script>
var canvas = document.getElementById('my_canvas');
var gl = canvas.getContext('experimental-webgl');
gl.clearColor(0.9,0.9,0.8,1);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</html>
