绘图由 标签开始，它在网页上呈现一块画布，定义用来呈现各种图形的视觉化区域，一旦完成这个标签的配置，你便可以在其中描绘任何图形，它与网页关系如下图：
原点座标（00）为左上角，水平 x 座标从原点往右边递增，垂直座标 y 从原点往下递增，描绘图形时，透过座标位置的设定，指定与原点偏移的距离，以决定在canvas区域的定位。
考虑以下的网页标签配置：
这一段 标签配置，将背景设定定为 silver ，因此在网页中会看到一块预设大小的灰**域，后续即可在这个区域中描绘任何图形。
我们进一步透过height 与width 属性则决定 canvas 可显示在画面上的可显示区域大小，如下式：
完成 canvas 区域的适当调整，接下来就可以在其中描绘图形了。画一条直线是最简单的绘图操作，因此这里直接利用直线描绘来说明最基础的 标签绘图功能支援，我们希望在网页载入时，完成一条直线的描绘，并显示在 canvas 区域中。
第一行设定起始座标，第二行设定线条的结束座标，最后再调用 stroke() 方法即可将线条描绘出来，以下列举完整的网页程式码：