HTML5 Canvas (I)

5 min readJan 15, 2017

Wondering how to draw something on webpage? This article is going to teach you how to create simple canvas with HTML and JavaScript, using basic JavaScript syntax and you can draw shapes and other basic type of pattern. It required a little knowledge of HTML and basic JavaScript experience.

想知道如何在的網頁上畫出什麼樣的圖形嗎？這一篇文章將會教你如何藉由 HTML 以及 JavaScript 去創作出一個簡單的 HTML Canvas (中：畫布)，使用簡單的 JavaScript 語法就可以達到畫出基本的形狀與其他多樣化的圖案。學習 Canvas 需要一些些 HTML 的基礎以及懂得一些 JavaScript 基本的語法。

If you already know HTML, JavaScript and you are eager to playing with canvas, you can copy the sample code in this Gist which result is the simple canvas in the main title.

若你已經知道一些 HTML, JavaScript 的語法，而且你也迫不及待想要玩 Canvas 的話，你可以複製這個 Gist 的程式碼去玩玩看，其產出的結果跟上面主要的文章標題的圖案一模一樣。

Setup HTML Canvas

HTML Canvas Tag

Okay, let’s start from the canvas basic! First we need to know how to setup a canvas. It is very simple, by using a canvas tag, you can specify it width and height property (Width and height units are in pixels.). Remember to close the canvas tag. (Notice that you can not use CSS to specify its width and height.)

我們開始進行主題，在講解 Canvas 的基本概念之前，我們必須知道如何設定 Canvas 主體。藉由 Canvas 的 HTML 標籤我們可以創造出一個空間，並標示 width 寬度以及 height 高度的特性在標籤上，然後寬度以及高度的單位是 pixels。Canvas 標籤必須記得關閉，基本 HTML 設定就完成了。(需要注意的是，Canvas 大小不能用 CSS 來設定)

Also, you can setup Canvas width or height via JavaScript or jQuery.

你也可以使用 JavaScript 或者是 jQuery 來設定 Canvas 的大小。

Fallback Content

Some older browsers do not support HTML Canvas, such as older versions of Internet Explorer. So, you should provide fallback content, it is easy to setup, just type the fallback content into the canvas tag.

有一些舊的版本的瀏覽器不支援 HTML Canvas (比如 Internet Explorer)，所以我們必須提供替代 Canvas 的內容。直接在 canvas 標籤內部就可以編輯替代的內容。

Draw Canvas After Document Loaded

In JavaScript, we need to ensure that the canvas will display our graphic, so we should draw canvas after the HTML document is loaded. You can done with Vanilla JavaScript or jQuery. After this step, we can draw the canvas via JavaScript. You can copy the code and start the next section.

在 JavaScript 裡，我們要確保說在開始畫 Canvas 之前，我們要讓整個 HTML 文件先載入完成。這可以藉由純 JavaScript 或者是用 jQuery 都可以辦得到。這一個步驟完成之後，我們就可以開始使用 JavaScript 來畫圖了。你可以複製以下的程式碼然後就可以到下一個部分繼續學習。

2D Basic Shapes

Canvas Context

In HTML Canvas, we need to have a canvas context object to draw canvas. In this article, we based on drawing 2D graphics, which means there are 3D context based on WebGL. However, we will focus on drawing 2D graphics, let’s create the 2D canvas context object.

在 HTML Canvas 裡，我們需要一個叫做 canvas context (中：畫布的背景)的物件。因此，我們在這個文章裡主要談論的是如何畫出 2D 平面的圖案，也就是說，也有可以畫出 3D 圖案的畫布背景物件 (基於 WebGL)。然而，我們目前先專注於畫出 2D 平面的圖案。首先，先創造一個 2D Canvas Context 物件。

Coordinate in Canvas

In order to know “where” to draw your graphic, the illustration shows the coordination of the canvas. Both width and height are in unit of pixels. The origin (point (x = 0, y = 0)) is at the left-top side of the canvas. The white square is located at about (x = 15, y =15).

在畫出圖案之前，我們必須知道我們會在哪個地方畫出圖案。其中，上圖為 Canvas 的座標系統示意圖，其兩軸的座標單位皆為 pixels，Canvas 的左上角為其原點 (座標(x = 0, y = 0))。然後示意圖中白色的方框座標為(x = 15, y = 15)。

Drawing a Rectangle

Canvas provide a simple method to draw rectangle, which is fillRect() method or strokeRect() method. The fillRect() method draws a filled rectangle and the strokeRect() method draws the outline of a rectangle. Both of the method need the specify four parameters, the position X, position Y of the rectangle and both the width and height of the rectangle.

Canvas 提供簡單的方法去畫出一個長方形，分別為 fillRect() 以及 strokeRect()。 fillRect() 畫出的是實心的長方形，而 strokeRect() 則是一個只有邊框的長方形。兩個方法都需要四個值帶進去，分別是座標 X 以及座標 Y 的位置，以及長方形的寬度與高度。

Canvas context object has two properties, they are fillStyle and strokeStyle. When drawing filled shapes, input a colour code into fillStyle property, it will change the style of the filled shapes. On the other hand, the strokeStyle property controls the stroked shapes.

畫布背景物件有兩個性質，這兩個性質可以分別改變實心圖案以及邊框圖案的樣式。 fillStyle 可以改變實心圖案的顏色，而 strokeStyle 則是改變邊框圖案的顏色。

Result of Using Properties “fillStyle” and “fillStroke”

Drawing Lines (Paths)

Drawing lines is a little bit complex, but no worries, we break down the steps and shows how they work. First, we need to tell canvas we are going to draw a line by using the canvas context method beginPath(), it requires no input parameter. beginPath() turns the canvas context object into a series of command that can draw lines. (You can think of as turning this object into a “pen”.)

畫出路徑會稍微複雜一些，不過我們將會一步步解析如何畫出簡單路徑。首先，我們要讓畫布背景物件知道我們準備要畫出路徑，一開始可以使用方法 beginPath()，這個方法不需要用到任何的輸入值。這個方法可以想成把這個畫布背景物件變成一支筆，然後可以執行一系列的命令包含畫出路徑所需要的一些指示。

Second, we need to move to the location where we need to start drawing line, with moveTo() method, it requires the position X and Y two parameters.

再來，我們可以藉由 moveTo() 方法來調整我們畫筆的位置，只需要告訴它畫筆要放到哪一個 X 和 Y 座標。

Third, with lineTo() method and specify the location position X and Y as two parameters, we can draw a line (from the location where we “moved to”), and you can always add more lineTo() command to draw more lines as you wish.

如果我們要畫出那一條路徑時，我們可以使用 lineTo() 方法，藉由輸入要畫到的位置的座標 X 與 Y，將會輸出一個路徑結果從原本調整到的位置畫到在 lineTo() 裡面輸入的座標位置。

During drawing the lines, you can choose to close the path withclosePath() method. The method connects the final position to the starting position with a line and returns the command state back to normal canvas context object. (The method is optionally depend on usage.)

你可以利用 closePath() 方法把最後的位置點連接回第一個起始位置點，然後畫布背景物件也會從“一支筆”的狀態變回原本的物件狀態。(這個方法可以依據情況去使用它)

Finally, you can choose stroke() method to make your lines (or paths) into outline, or you can use fill() method to fill the path into a solid filled shape. The example illustrates how to draw a stroked or a filled right triangles.

最後，你可以使用 stroke() 方法讓所有剛剛畫出來的路徑變成實線，又或者可以使用 fill() 方法使路徑變成一個實心的圖案。這個例子畫出了兩個分別是實心的跟只有邊框的直角三角形。

Summery

We choose to end the section up here because drawing lines takes for a little time to practice. In this article, we showed you :

Setup and create a canvas via HTML <canvas> element and JavaScript.
Draw simple rectangles with fillRect() and strokeRect() method.
Using fillStyle and strokeStyle property to modify the filled or stroked shapes.
Draw lines (or paths) via a series of methods and make it filled or outlined.

到這裡作為一個段落，因為畫出線需要熟悉一些時間。這個文章大致上已經告訴你：

使用 HTML <canvas> 標籤和 JavaScript 去設定畫布以及畫出圖案
使用 fillRect() 以及 strokeRect() 創作出實心的或是邊框的長方形
使用 fillStyle 或是 strokeStyle 改變圖案的樣式
使用一系列的方法實作出路徑圍成的實心的圖形或者是路徑變成實心的線

If you learned well in this article, you should know how the illustration on the main title being created. Good luck drawing with canvas and see you next time ~ In the next article, we will focusing on creating circles and other kinds of shapes.

如果你熟悉這一篇文章告訴你的方法，你將可以利用這些方法實作出在這個文章一開始標題貼的 Canvas 圖案。在下一個文章裡，我們將會畫出圓形以及其他的圖案。