• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# <canvas> Development
2
3
4The **<canvas>** component provides a canvas for drawing customized graphics. For details, see [canvas](../reference/arkui-js/js-components-canvas-canvas.md).
5
6
7## Creating a <canvas> Component
8
9Create a **<canvas>** component in the .hml file under **pages/index**.
10
11
12```
13<!-- xxx.hml -->
14<div class="container">
15  <canvas></canvas>
16</div>
17```
18
19
20```css
21/* xxx.css */
22.container{
23  width: 100%;
24  height: 100%;
25  flex-direction: column;
26  justify-content: center;
27  align-items: center;
28  background-color: #F1F3F5;
29}
30canvas{
31  background-color: #00ff73;
32}
33```
34
35![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png)
36
37> **NOTE**
38>
39> - The default background color of the **&lt;canvas&gt;** component is the same as that of the parent component.
40>
41> - The default width and height of **&lt;canvas&gt;** are 300 px and 150 px, respectively.
42
43
44## Adding Styles
45
46Set **width**, **height**, **background-color**, and **border** of the **&lt;canvas&gt;** component.
47
48
49```html
50<!-- xxx.hml -->
51<div class="container">
52  <canvas></canvas>
53</div>
54```
55
56
57```css
58/* xxx.css */
59.container{
60  flex-direction: column;
61  justify-content: center;
62  align-items: center;
63  background-color: #F1F3F5;
64}
65canvas{
66  width: 500px;
67  height: 500px;
68  background-color: #fdfdfd;
69  border: 5px solid red;
70}
71```
72
73![en-us_image_0000001231843104](figures/en-us_image_0000001231843104.png)
74
75
76## Adding Events
77
78Add the long press event to the **&lt;canvas&gt;** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **&lt;canvas&gt;** component can be obtained and printed in the text area below.
79
80
81```html
82<!-- xxx.hml -->
83<div class="container">
84  <canvas ref="canvas1" onlongpress="getUrl"></canvas>
85  <text>dataURL</text>
86  <text class="content">{{dataURL}}</text>
87</div>
88```
89
90
91```css
92/* xxx.css */
93.container{
94  width:100%;
95  height:100%;
96  flex-direction: column;
97  justify-content: center;
98  align-items: center;
99  background-color: #F1F3F5;
100  }
101  canvas{
102    width: 500px;
103    height: 500px;
104    background-color: #fdfdfd;
105    border: 5px solid red;
106    margin-bottom: 50px;
107}
108.content{
109  border: 5px solid blue;
110  padding: 10px;
111  width: 90%;
112  height: 400px;
113  overflow: scroll;
114}
115```
116
117
118```js
119// xxx.js
120import promptAction from '@ohos.promptAction';
121export default {
122  data:{
123    dataURL:null,
124  },
125  onShow(){
126    let el = this.$refs.canvas1;
127    let ctx = el.getContext("2d");
128    ctx.strokeRect(100,100,300,300);
129  },
130  getUrl(){
131    let el = this.$refs.canvas1
132    let dataUrl = el.toDataURL()
133    this.dataURL = dataUrl;
134    promptAction.showToast({duration:2000,message:"long press,get dataURL"})
135  }
136}
137```
138
139![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif)
140
141> **NOTE**
142>
143> The **&lt;canvas&gt;** component cannot be created in **onInit** or **onReady**.
144