---
title: canvas - Canvas
---
## Canvas
Version Requirements:@ray-js/ray≥0.5.10
### Description
Canvas component.
### Usage
> Use canvas for [hybrid development](/en/miniapp/develop/ray/framework/mixed-development) in Ray
- Method 1: Use [RJS](/en/miniapp/develop/ray/framework/render) for drawing. This allows you to get canvas nodes and draw charts, animations, and various graphics.
- Method 2: Use the [createCanvasContext](/en/miniapp/develop/miniapp/api/canvas/CanvasContext/createCanvasContext) API in the logic layer JS. This method cannot get canvas node objects.
```js
import { createCanvasContext } from '@ray-js/ray';
const context = createCanvasContext('***');
```
> Method 1 ([RJS](/en/miniapp/develop/ray/framework/render)) is recommended for better performance.
### Properties
| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| canvas-id | string | Yes | "" | Unique identifier of the canvas component. This property must be set |
| type | string | No | "2d" | Specifies the canvas type. Valid value: 2d |
| disable-scroll | boolean | No | false | When moving within the canvas and gesture events are bindded, disables screen scrolling and pull-down refresh |
| auto-resize | boolean | No | - | Enables canvas auto-resizing. When layout changes, the bind:resize event is triggered |
| bind:touchstart | (event: CanvasTouchEvent) => void | No | - | Triggered when a finger touch starts |
| bind:touchmove | (event: CanvasTouchEvent) => void | No | - | Triggered when a finger moves after touching |
| bind:touchend | (event: CanvasTouchEvent) => void | No | - | Triggered when a finger touch ends |
| bind:touchcancel | (event: CanvasTouchEvent) => void | No | - | Triggered when a finger touch is interrupted, such as by an incoming call or popup |
| bind:longpress | (event: CanvasTouchEvent) => void | No | - | Triggered after a finger long press of 500ms. Moving after triggering a long press event will not trigger screen scrolling |
| bind:error | (event: CanvasErrorEvent) => void | No | - | Triggered when an error occurs |
| bind:resize | (event: CanvasResizeEvent) => void | No | - | Triggered when using rpx units for responsive layout and the canvas size changes due to screen size changes |
### Example Code
#### Drawing with RJS (Recommended)
```tsx
// index.tsx
import { usePageEvent, usePageInstance, View } from '@ray-js/ray';
import Render from './index.rjs';
import React from 'react';
export default function () {
const ctx = usePageInstance();
usePageEvent('onReady', () => {
const render = new Render(ctx);
render.init('pageCanvas2');
});
return (
Canvas drawn via RJS in page
);
}
```
```javascript
// render.rjs
export default Render({
init(canvasId) {
getCanvasById(canvasId).then((canvas) => {
if (canvas) {
const ctx = canvas.getContext('2d');
this.canvas = canvas;
this.ctx = ctx;
this.width = canvas.width;
this.height = canvas.height;
this.drawBackground();
this.drawCircle();
this.drawRect();
this.drawText();
}
});
},
drawBackground() {
this.ctx.fillStyle = '#ffffff';
this.ctx.fillRect(0, 0, this.width, this.height);
},
drawCircle() {
this.ctx.beginPath();
this.ctx.arc(100, 100, 50, 0, 2 * Math.PI);
this.ctx.fillStyle = '#ff6b6b';
this.ctx.fill();
this.ctx.strokeStyle = '#c92a2a';
this.ctx.lineWidth = 3;
this.ctx.stroke();
},
drawRect() {
this.ctx.fillStyle = '#4dabf7';
this.ctx.fillRect(200, 50, 100, 100);
this.ctx.strokeStyle = '#1971c2';
this.ctx.lineWidth = 3;
this.ctx.strokeRect(200, 50, 100, 100);
},
drawText() {
this.ctx.font = '20px sans-serif';
this.ctx.fillStyle = '#333';
this.ctx.fillText('RJS Canvas', 120, 200);
},
});
```
#### Drawing with createCanvasContext API
```tsx | sandbox previewTitle="Drawing with createCanvasContext API"
import { usePageEvent, createCanvasContext, View } from '@ray-js/ray';
export default function () {
usePageEvent('onReady', () => {
const context = createCanvasContext('pageCanvas1');
context.setStrokeStyle('#00ff00');
context.setLineWidth(5);
context.rect(0, 0, 200, 200);
context.stroke();
context.setStrokeStyle('#ff0000');
context.setLineWidth(2);
context.moveTo(160, 100);
context.arc(100, 100, 60, 0, 2 * Math.PI, true);
context.moveTo(140, 100);
context.arc(100, 100, 40, 0, Math.PI, false);
context.moveTo(85, 80);
context.arc(80, 80, 5, 0, 2 * Math.PI, true);
context.moveTo(125, 80);
context.arc(120, 80, 5, 0, 2 * Math.PI, true);
context.stroke();
context.draw();
});
return (
Canvas drawn directly in page
);
}
```
### Related Links
Related API: [createCanvasContext](/en/miniapp/develop/miniapp/api/canvas/CanvasContext/createCanvasContext).