1# CanvasRenderingContext2D
2
3
4**CanvasRenderingContext2D** allows you to draw rectangles and text on a canvas.
5
6**Example**
7
8```html
9<!-- xxx.hml -->
10<canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
11<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
12
13```
14
15
16```javascript
17// xxx.js
18export default {
19  handleClick() {
20    const el = this.$refs.canvas1;
21    const ctx = el.getContext('2d');
22    ctx.beginPath();
23    ctx.arc(100, 75, 50, 0, 6.28);
24    ctx.stroke();
25  },
26}
27```
28
29  ![en-us_image_0000001431548113](figures/en-us_image_0000001431548113.png)
30
31
32## fillRect()
33
34Fills a rectangle on the canvas.
35
36**Parameters**
37
38| Parameter| Type| Description|
39| -------- | -------- | -------- |
40| x | number | X-coordinate of the upper left corner of the rectangle.|
41| y | number | Y-coordinate of the upper left corner of the rectangle.|
42| width | number | Width of the rectangle.|
43| height | number | Height of the rectangle.|
44
45**Example**
46
47 ![en-us_image_0000001431388525](figures/en-us_image_0000001431388525.png)
48
49
50  ```javascript
51  ctx.fillRect(20, 20, 200, 150);
52  ```
53
54
55## fillStyle
56
57Sets the style to fill an area.
58
59**Parameters**
60
61| Parameter| Type| Description|
62| -------- | -------- | -------- |
63| color | &lt;color&gt; | Color used to fill the area|
64
65**Example**
66
67  ![en-us_image_0000001431388505](figures/en-us_image_0000001431388505.png)
68
69
70  ```javascript
71  ctx.fillStyle = '#0000ff';
72  ctx.fillRect(20, 20, 150, 100);
73  ```
74
75
76## strokeRect()
77
78Draws a rectangle stroke on the canvas.
79
80**Parameters**
81
82| Parameter| Type| Description|
83| -------- | -------- | -------- |
84| x | number | X-coordinate of the upper left corner of the rectangle.|
85| y | number | Y-coordinate of the upper left corner of the rectangle.|
86| width | number | Width of the rectangle.|
87| height | number | Height of the rectangle.|
88
89**Example**
90
91  ![en-us_image_0000001381268264](figures/en-us_image_0000001381268264.png)
92
93
94  ```javascript
95  ctx.strokeRect(30, 30, 200, 150);
96  ```
97
98
99## fillText()
100
101Draws filled text on the canvas.
102
103**Parameters**
104
105| Parameter| Type| Description|
106| -------- | -------- | -------- |
107| text | string | Text to draw.|
108| x | number | X-coordinate of the lower left corner of the text.|
109| y | number | Y-coordinate of the lower left corner of the text.|
110
111**Example**
112
113  ![en-us_image_0000001431548109](figures/en-us_image_0000001431548109.png)
114
115
116  ```javascript
117  ctx.font = '35px sans-serif';
118  ctx.fillText("Hello World!", 20, 60);
119  ```
120
121
122## lineWidth
123
124Sets the width of a line.
125
126**Parameters**
127
128| Parameter| Type| Description|
129| -------- | -------- | -------- |
130| lineWidth | number | Line width.|
131
132**Example**
133
134  ![en-us_image_0000001431548121](figures/en-us_image_0000001431548121.png)
135
136
137  ```javascript
138  ctx.lineWidth = 5;
139  ctx.strokeRect(25, 25, 85, 105);
140  ```
141
142
143## strokeStyle
144
145Sets the stroke style.
146
147**Parameters**
148
149| Parameter| Type| Description|
150| -------- | -------- | -------- |
151| color | &lt;color&gt; | Color of the stroke.|
152
153**Example**
154
155  ![en-us_image_0000001380789172](figures/en-us_image_0000001380789172.png)
156
157
158  ```javascript
159  ctx.lineWidth = 10;
160  ctx.strokeStyle = '#0000ff';
161  ctx.strokeRect(25, 25, 155, 105);
162  ```
163
164
165### stroke()<sup>5+</sup>
166
167Draws a stroke.
168
169**Example**
170
171![en-us_image_0000001431388513](figures/en-us_image_0000001431388513.png)
172
173  ```javascript
174  ctx.moveTo(25, 25);
175  ctx.lineTo(25, 105);
176  ctx.strokeStyle = 'rgb(0,0,255)';
177  ctx.stroke();
178  ```
179
180
181### beginPath()<sup>5+</sup>
182
183Creates a drawing path.
184
185**Example**
186
187  ![en-us_image_0000001431548125](figures/en-us_image_0000001431548125.png)
188
189
190  ```javascript
191  ctx.beginPath();
192  ctx.lineWidth = '6';
193  ctx.strokeStyle = '#0000ff';
194  ctx.moveTo(15, 80);
195  ctx.lineTo(280, 160);
196  ctx.stroke();
197  ```
198
199
200### moveTo()<sup>5+</sup>
201
202Moves a drawing path to a target position on the canvas.
203
204**Parameters**
205
206| Parameter| Type| Description|
207| -------- | -------- | -------- |
208| x | number | X-coordinate of the target position.|
209| y | number | Y-coordinate of the target position.|
210
211**Example**
212
213  ![en-us_image_0000001431388529](figures/en-us_image_0000001431388529.png)
214
215  ```javascript
216  ctx.beginPath();
217  ctx.moveTo(10, 10);
218  ctx.lineTo(280, 160);
219  ctx.stroke();
220  ```
221
222
223### lineTo()<sup>5+</sup>
224
225Connects the current point to a target position using a straight line.
226
227**Parameters**
228
229| Parameter| Type| Description|
230| -------- | -------- | -------- |
231| x | number | X-coordinate of the target position.|
232| y | number | Y-coordinate of the target position.|
233
234**Example**
235
236![en-us_image_0000001431148365](figures/en-us_image_0000001431148365.png)
237
238  ```javascript
239  ctx.beginPath();
240  ctx.moveTo(10, 10);
241  ctx.lineTo(280, 160);
242  ctx.stroke();
243  ```
244
245
246### closePath()<sup>5+</sup>
247
248Draws a closed path.
249
250**Example**
251
252  ![en-us_image_0000001381268284](figures/en-us_image_0000001381268284.png)
253
254
255  ```javascript
256  ctx.beginPath();
257  ctx.moveTo(30, 30);
258  ctx.lineTo(110, 30);
259  ctx.lineTo(70, 90);
260  ctx.closePath();
261  ctx.stroke();
262  ```
263
264
265## font
266
267Sets the font style.
268
269**Parameters**
270
271| Parameter| Type| Description|
272| -------- | -------- | -------- |
273| value | string | Font style. **sans-serif**, **serif**, and **monospace** are supported. The default value is **30px HYQiHei-65S**.|
274
275**Example**
276
277  ![en-us_image_0000001381108328](figures/en-us_image_0000001381108328.png)
278
279
280  ```javascript
281  ctx.font = '30px sans-serif';
282  ctx.fillText("Hello World", 20, 60);
283  ```
284
285
286## textAlign
287
288Sets the text alignment mode.
289
290**Parameters**
291
292| Parameter| Type| Description|
293| -------- | -------- | -------- |
294| align | string | Available values are as follows:<br>- **left** (default): The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.|
295
296**Example**
297
298  ![en-us_image_0000001431388517](figures/en-us_image_0000001431388517.png)
299
300
301  ```javascript
302  ctx.strokeStyle = '#0000ff';
303  ctx.moveTo(140, 10);
304  ctx.lineTo(140, 160);
305  ctx.stroke();
306
307  ctx.font = '18px sans-serif';
308
309  // Show the different textAlign values
310  ctx.textAlign = 'left';
311  ctx.fillText('textAlign=left', 140, 100);
312  ctx.textAlign = 'center';
313  ctx.fillText('textAlign=center',140, 120);
314  ctx.textAlign = 'right';
315  ctx.fillText('textAlign=right',140, 140);
316  ```
317
318
319## arc()<sup>5+</sup>
320
321Draws an arc on the canvas.
322
323**Parameters**
324
325| Parameter| Type| Description|
326| -------- | -------- | -------- |
327| x | number | X-coordinate of the center point of the arc.|
328| y | number | Y-coordinate of the center point of the arc.|
329| radius | number | Radius of the arc.|
330| startAngle | number | Start radian of the arc.|
331| endAngle | number | End radian of the arc.|
332| anticlockwise | boolean | Whether to draw the arc counterclockwise.|
333
334**Example**
335
336![en-us_image_0000001381108320](figures/en-us_image_0000001381108320.png)
337
338  ```javascript
339  ctx.beginPath();
340  ctx.arc(100, 75, 50, 0, 6.28);
341  ctx.stroke();
342  ```
343
344
345### rect()<sup>5+</sup>
346
347Creates a rectangle on the canvas.
348
349**Parameters**
350
351| Parameter| Type| Description|
352| -------- | -------- | -------- |
353| x | number | X-coordinate of the upper left corner of the rectangle.|
354| y | number | Y-coordinate of the upper left corner of the rectangle.|
355| width | number | Width of the rectangle.|
356| height | number | Height of the rectangle.|
357
358**Example**
359
360![en-us_image_0000001381108312](figures/en-us_image_0000001381108312.png)
361
362  ```javascript
363  ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
364  ctx.stroke(); // Draw it
365  ```
366