1# Applying Custom Drawing in the Widget 2 3 4 You can apply custom drawing in your ArkTS widget to create a more vibrant experience. Use the [Canvas](../reference/arkui-ts/ts-components-canvas-canvas.md) component to create a canvas on the widget, and then use the [CanvasRenderingContext2D](../reference/arkui-ts/ts-canvasrenderingcontext2d.md) object to draw custom graphics on the canvas. The following code shows how to draw a smiling face in the center of the canvas. 5 6```typescript 7@Entry 8@Component 9struct Card { 10 private canvasWidth: number = 0; 11 private canvasHeight: number = 0; 12 // Initialize CanvasRenderingContext2D and RenderingContextSettings. 13 private settings: RenderingContextSettings = new RenderingContextSettings(true); 14 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 15 16 build() { 17 Column() { 18 Row() { 19 Canvas(this.context) 20 .margin('5%') 21 .width('90%') 22 .height('90%') 23 .onReady(() => { 24 console.info('[ArkTSCard] onReady for canvas draw content'); 25 // Obtain the actual width and height of the canvas in the onReady callback. 26 this.canvasWidth = this.context.width; 27 this.canvasHeight = this.context.height; 28 // Draw the background of the canvas. 29 this.context.fillStyle = 'rgba(203, 154, 126, 1.00)'; 30 this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight); 31 // Draw a red circle in the center of the canvas. 32 this.context.beginPath(); 33 let radius = this.context.width / 3 34 let circleX = this.context.width / 2 35 let circleY = this.context.height / 2 36 this.context.moveTo(circleX - radius, circleY); 37 this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true); 38 this.context.closePath(); 39 this.context.fillStyle = 'red'; 40 this.context.fill(); 41 // Draw the left eye of the smiling face. 42 let leftR = radius / 4 43 let leftX = circleX - (radius / 2) 44 let leftY = circleY - (radius / 3.5) 45 this.context.beginPath(); 46 this.context.arc(leftX, leftY, leftR, 0, Math.PI, true); 47 this.context.strokeStyle = '#ffff00' 48 this.context.lineWidth = 10 49 this.context.stroke() 50 // Draw the right eye of the smiling face. 51 let rightR = radius / 4 52 let rightX = circleX + (radius / 2) 53 let rightY = circleY - (radius / 3.5) 54 this.context.beginPath(); 55 this.context.arc(rightX, rightY, rightR, 0, Math.PI, true); 56 this.context.strokeStyle = '#ffff00' 57 this.context.lineWidth = 10 58 this.context.stroke() 59 // Draw the mouth of the smiling face. 60 let mouthR = radius / 2.5 61 let mouthX = circleX 62 let mouthY = circleY + (radius / 3) 63 this.context.beginPath(); 64 this.context.arc(mouthX, mouthY, mouthR, Math.PI, 0, true); 65 this.context.strokeStyle = '#ffff00' 66 this.context.lineWidth = 10 67 this.context.stroke() 68 }) 69 } 70 }.height('100%').width('100%') 71 } 72} 73``` 74 75 76The figure below shows the effect. 77 78 79 80
