• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# OffscreenCanvasRenderingContext2D
2
3**OffscreenCanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on an offscreen canvas, which is a new buffer created by the GPU outside of the current buffer. For details, see [OffscreenCanvasRenderingContext2D](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md).
4
5In the following example, you first create an offscreen canvas, and then create a **getContext2d** object on the canvas, which is an image, and finally set the **filter** attribute for the image.
6
7```html
8<!-- xxx.hml -->
9<div class="container">
10  <canvas ref="canvas1"></canvas>
11  <select @change="change()">
12    <option value="blur(5px)">blur</option>
13    <option value="grayscale(50%)">grayscale</option>
14    <option value="hue-rotate(45deg)">hue-rotate</option>
15    <option value="invert(100%)">invert</option>
16    <option value="drop-shadow(8px 8px 10px green)">drop-shadow</option>
17    <option value="brightness(0.4)">brightness</option>
18    <option value="opacity(0.25)">opacity</option>
19    <option value="saturate(30%)">saturate</option>
20    <option value="sepia(60%)">sepia</option>
21    <option value="contrast(200%)">contrast</option>
22  </select>
23</div>
24```
25
26```css
27/* xxx.css */
28.container{
29  width: 100%;
30  height: 100%;
31  flex-direction: column;
32  justify-content: center;
33  align-items: center;
34  background-color: #F1F3F5;
35}
36canvas{
37  width: 600px;
38  height: 500px;
39  background-color: #fdfdfd;
40  border: 5px solid red;
41}
42select{
43  margin-top: 50px;
44  width: 250px;
45  height: 100px;
46  background-color: white;
47}
48```
49
50```js
51// xxx.js
52import promptAction from '@ohos.promptAction';
53export default {
54  data:{
55    el: null,
56    ctx: null,
57    offscreen: null,
58    offCanvas: null,
59    img: null,
60  },
61  onShow(){
62    this.ctx = this.$refs.canvas1.getContext("2d");
63    this.offscreen = new OffscreenCanvas(600, 500);
64    this.offCanvas = this.offscreen.getContext("2d");
65    this.img = new Image();
66    this.img.src = 'common/images/2.png';
67    // Invoked when the image is successfully obtained.
68    let _this = this;
69    this.img.onload = function() {
70      _this.offCanvas.drawImage(_this.img, 100, 100, 400, 300);
71    };
72    this.img.onerror = function() {
73      promptAction.showToast({message:"error",duration:2000})
74    };
75    var bitmap = this.offscreen.transferToImageBitmap();    this.ctx.transferFromImageBitmap(bitmap);
76  },
77  change(e){
78    this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
79    var bitmap = this.offscreen.transferToImageBitmap();
80    this.ctx.transferFromImageBitmap(bitmap);
81  },
82}
83```
84
85
86![en-us_image_0000001232162292](figures/en-us_image_0000001232162292.gif)
87
88
89## Determining the Position
90
91Use **isPointInPath** to determine whether a coordinate is within the path area and use **isPointInStroke** to determine whether a coordinate is on the edge of the path.
92
93
94```html
95<!-- xxx.hml -->
96<div class="container">
97  <div class="content">
98    <text>Coordinate: {{X}}, {{Y}}</text>
99    <text>In path:{{textValue}}</text>
100    <text>In stroke:{{textValue1}}</text>
101  </div>
102  <canvas ref="canvas"></canvas>
103  <button onclick="change">Add(50)</button>
104</div>
105```
106
107
108```css
109/* xxx.css */
110.container{
111  width: 100%;
112  height: 100%;
113  flex-direction: column;
114  justify-content: center;
115  align-items: center;
116  background-color: #F1F3F5;
117}
118canvas{
119  width: 600px;
120  height: 500px;
121  background-color: #fdfdfd;
122  border: 5px solid red;
123}
124.content{
125  flex-direction: column;
126  justify-content: center;
127  align-items: center;
128}
129text{
130  font-size: 30px;
131  width: 300px;
132  height: 80px;
133  text-align: center;
134}
135button{
136  width: 180px;
137  height: 75px;
138  margin-top: 50px;
139}
140```
141
142
143```js
144// xxx.js
145export default {
146  data: {
147    textValue: 0,
148    textValue1: 0,
149    X:0,
150    Y:250,
151  },
152  onShow(){
153    let canvas = this.$refs.canvas.getContext('2d');
154    let offscreen = new OffscreenCanvas(500,500);
155    let offscreenCanvasCtx = offscreen.getContext("2d");
156    let offscreenCanvasCtx1 = offscreen.getContext("2d");
157    offscreenCanvasCtx1.arc(this.X, this.Y, 2, 0, 6.28);
158    offscreenCanvasCtx.lineWidth=20;
159    offscreenCanvasCtx.rect(200,150, 200, 200);
160    offscreenCanvasCtx.stroke();
161    this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false';
162    this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false';
163    let bitmap = offscreen.transferToImageBitmap();
164    canvas.transferFromImageBitmap(bitmap);
165  },
166  change(){
167    if(this.X < 500){
168      this.X = this.X+50;
169    }else{
170      this.X = 0;
171    }
172    let canvas = this.$refs.canvas.getContext('2d');
173    let offscreen = new OffscreenCanvas(500,500);
174    let offscreenCanvasCtx = offscreen.getContext("2d");
175    let offscreenCanvasCtx1 = offscreen.getContext("2d");
176    offscreenCanvasCtx1.arc(this.X, this.Y, 1, 0, 6.28)
177    offscreenCanvasCtx.lineWidth=20
178    offscreenCanvasCtx.rect(200,150, 200, 200);
179    offscreenCanvasCtx.stroke();
180    this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false';
181    this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false';
182    let bitmap = offscreen.transferToImageBitmap();
183    canvas.transferFromImageBitmap(bitmap);
184  }
185}
186```
187
188![en-us_image_0000001178084014](figures/en-us_image_0000001178084014.gif)
189