CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-miniprogram-api-typings

Type definitions for APIs of WeChat Mini Program in TypeScript

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

canvas-graphics.mddocs/

Canvas and Graphics

2D Canvas and WebGL rendering contexts for graphics, animations, and game development in WeChat Mini Programs.

Capabilities

Canvas Context Creation

Create 2D rendering contexts for drawing operations.

interface Wx {
  /** Create 2D canvas rendering context */
  createCanvasContext(
    canvasId: string,
    componentInstance?: any
  ): CanvasRenderingContext2D;
  
  /** Convert canvas to temporary file */
  canvasToTempFilePath(options: CanvasToTempFilePathOption): void;
  
  /** Get canvas image data */
  canvasGetImageData(options: CanvasGetImageDataOption): void;
  
  /** Put canvas image data */
  canvasPutImageData(options: CanvasPutImageDataOption): void;
}

interface CanvasToTempFilePathOption {
  /** Canvas component instance */
  canvas?: any;
  /** Canvas ID */
  canvasId?: string;
  /** Image format */
  fileType?: 'png' | 'jpg';
  /** Image quality (0-1) */
  quality?: number;
  /** Crop rectangle */
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  /** Success callback */
  success?(res: { tempFilePath: string }): void;
  /** Failure callback */
  fail?(res: any): void;
  /** Completion callback */
  complete?(res: any): void;
}

Usage Examples:

// Create canvas context
Page({
  onReady() {
    const ctx = wx.createCanvasContext('myCanvas', this);
    
    // Draw rectangle
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(10, 10, 100, 50);
    
    // Draw text
    ctx.fillStyle = '#000000';
    ctx.font = '16px Arial';
    ctx.fillText('Hello Canvas', 10, 80);
    
    // Draw to canvas
    ctx.draw();
  },
  
  saveCanvas() {
    wx.canvasToTempFilePath({
      canvasId: 'myCanvas',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            wx.showToast({ title: 'Saved to album' });
          }
        });
      }
    }, this);
  }
});

2D Canvas Rendering Context

Complete 2D drawing API with paths, shapes, text, images, and transformations.

interface CanvasRenderingContext2D {
  /** Canvas width */
  canvas: {
    width: number;
    height: number;
  };
  
  // Drawing state
  /** Fill style (color, gradient, pattern) */
  fillStyle: string | CanvasGradient | CanvasPattern;
  /** Stroke style */
  strokeStyle: string | CanvasGradient | CanvasPattern;
  /** Line width */
  lineWidth: number;
  /** Line cap style */
  lineCap: 'butt' | 'round' | 'square';
  /** Line join style */
  lineJoin: 'miter' | 'round' | 'bevel';
  /** Miter limit */
  miterLimit: number;
  /** Global alpha */
  globalAlpha: number;
  /** Global composite operation */
  globalCompositeOperation: string;
  
  // Path methods
  /** Begin new path */
  beginPath(): void;
  /** Close current path */
  closePath(): void;
  /** Move to point */
  moveTo(x: number, y: number): void;
  /** Line to point */
  lineTo(x: number, y: number): void;
  /** Quadratic curve to */
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
  /** Bezier curve to */
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
  /** Arc */
  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void;
  /** Arc to */
  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
  /** Rectangle path */
  rect(x: number, y: number, width: number, height: number): void;
  
  // Drawing methods
  /** Fill current path */
  fill(): void;
  /** Stroke current path */
  stroke(): void;
  /** Fill rectangle */
  fillRect(x: number, y: number, width: number, height: number): void;
  /** Stroke rectangle */
  strokeRect(x: number, y: number, width: number, height: number): void;
  /** Clear rectangle */
  clearRect(x: number, y: number, width: number, height: number): void;
  
  // Text methods
  /** Font style */
  font: string;
  /** Text alignment */
  textAlign: 'left' | 'center' | 'right' | 'start' | 'end';
  /** Text baseline */
  textBaseline: 'top' | 'middle' | 'bottom' | 'alphabetic' | 'hanging' | 'ideographic';
  /** Fill text */
  fillText(text: string, x: number, y: number, maxWidth?: number): void;
  /** Stroke text */
  strokeText(text: string, x: number, y: number, maxWidth?: number): void;
  /** Measure text */
  measureText(text: string): { width: number };
  
  // Image methods
  /** Draw image */
  drawImage(
    image: any,
    dx: number,
    dy: number
  ): void;
  drawImage(
    image: any,
    dx: number,
    dy: number,
    dWidth: number,
    dHeight: number
  ): void;
  drawImage(
    image: any,
    sx: number,
    sy: number,
    sWidth: number,
    sHeight: number,
    dx: number,
    dy: number,
    dWidth: number,
    dHeight: number
  ): void;
  
  // Transform methods
  /** Scale */
  scale(x: number, y: number): void;
  /** Rotate */
  rotate(angle: number): void;
  /** Translate */
  translate(x: number, y: number): void;
  /** Transform */
  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
  /** Set transform */
  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
  
  // State methods
  /** Save state */
  save(): void;
  /** Restore state */
  restore(): void;
  
  // Gradient and pattern methods
  /** Create linear gradient */
  createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
  /** Create radial gradient */
  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
  /** Create pattern */
  createPattern(image: any, repetition: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'): CanvasPattern | null;
  
  // Image data methods
  /** Get image data */
  getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
  /** Put image data */
  putImageData(imageData: ImageData, dx: number, dy: number): void;
  /** Create image data */
  createImageData(sw: number, sh: number): ImageData;
  
  // WeChat-specific methods
  /** Draw to canvas (WeChat Mini Program specific) */
  draw(reserve?: boolean, callback?: () => void): void;
  /** Set line dash */
  setLineDash(segments: number[]): void;
  /** Get line dash */
  getLineDash(): number[];
  /** Line dash offset */
  lineDashOffset: number;
}

interface CanvasGradient {
  /** Add color stop */
  addColorStop(offset: number, color: string): void;
}

interface CanvasPattern {
  /** Set transform */
  setTransform?(transform: any): void;
}

interface ImageData {
  /** Pixel data */
  readonly data: Uint8ClampedArray;
  /** Image width */
  readonly width: number;
  /** Image height */
  readonly height: number;
}

Usage Examples:

const ctx = wx.createCanvasContext('gameCanvas', this);

// Draw gradient background
const gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, '#FF6B6B');
gradient.addColorStop(1, '#4ECDC4');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);

// Draw shapes with transforms
ctx.save();
ctx.translate(150, 150);
ctx.rotate(Math.PI / 4);
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(-25, -25, 50, 50);
ctx.restore();

// Draw text with custom font
ctx.font = 'bold 24px Arial';
ctx.textAlign = 'center';
ctx.fillStyle = '#000000';
ctx.fillText('Game Score: 1500', 150, 50);

// Draw image
const img = canvas.createImage();
img.onload = () => {
  ctx.drawImage(img, 100, 100, 100, 100);
  ctx.draw();
};
img.src = '/images/sprite.png';

// Animation loop
let frame = 0;
function animate() {
  ctx.clearRect(0, 0, 300, 300);
  
  // Animated circle
  ctx.beginPath();
  ctx.arc(150 + Math.sin(frame * 0.1) * 50, 150, 20, 0, Math.PI * 2);
  ctx.fillStyle = '#FF6B6B';
  ctx.fill();
  
  ctx.draw(false, () => {
    frame++;
    requestAnimationFrame(animate);
  });
}
animate();

WebGL Context

WebGL 1.0 and 2.0 support for advanced 3D graphics.

// WebGL context interfaces (standard WebGL APIs)
interface WebGLRenderingContext {
  // Viewport and drawing
  viewport(x: number, y: number, width: number, height: number): void;
  clear(mask: number): void;
  clearColor(red: number, green: number, blue: number, alpha: number): void;
  clearDepth(depth: number): void;
  
  // Buffer operations
  createBuffer(): WebGLBuffer | null;
  bindBuffer(target: number, buffer: WebGLBuffer | null): void;
  bufferData(target: number, data: ArrayBuffer | ArrayBufferView, usage: number): void;
  
  // Shader operations
  createShader(type: number): WebGLShader | null;
  shaderSource(shader: WebGLShader, source: string): void;
  compileShader(shader: WebGLShader): void;
  createProgram(): WebGLProgram | null;
  attachShader(program: WebGLProgram, shader: WebGLShader): void;
  linkProgram(program: WebGLProgram): void;
  useProgram(program: WebGLProgram | null): void;
  
  // Drawing
  drawArrays(mode: number, first: number, count: number): void;
  drawElements(mode: number, count: number, type: number, offset: number): void;
  
  // Constants
  readonly VERTEX_SHADER: number;
  readonly FRAGMENT_SHADER: number;
  readonly ARRAY_BUFFER: number;
  readonly ELEMENT_ARRAY_BUFFER: number;
  readonly STATIC_DRAW: number;
  readonly TRIANGLES: number;
}

interface WebGL2RenderingContext extends WebGLRenderingContext {
  // WebGL 2.0 specific methods
  drawArraysInstanced(mode: number, first: number, count: number, instanceCount: number): void;
  drawElementsInstanced(mode: number, count: number, type: number, offset: number, instanceCount: number): void;
  
  // Transform feedback
  createTransformFeedback(): WebGLTransformFeedback | null;
  deleteTransformFeedback(transformFeedback: WebGLTransformFeedback): void;
  bindTransformFeedback(target: number, transformFeedback: WebGLTransformFeedback | null): void;
  beginTransformFeedback(primitiveMode: number): void;
  endTransformFeedback(): void;
  
  // Uniform buffer objects
  bindBufferBase(target: number, index: number, buffer: WebGLBuffer | null): void;
  getUniformBlockIndex(program: WebGLProgram, uniformBlockName: string): number;
  uniformBlockBinding(program: WebGLProgram, uniformBlockIndex: number, uniformBlockBinding: number): void;
  
  // Vertex array objects
  createVertexArray(): WebGLVertexArrayObject | null;
  deleteVertexArray(vertexArray: WebGLVertexArrayObject): void;
  bindVertexArray(vertexArray: WebGLVertexArrayObject | null): void;
  
  // Texture features
  texStorage2D(target: number, levels: number, internalformat: number, width: number, height: number): void;
  texStorage3D(target: number, levels: number, internalformat: number, width: number, height: number, depth: number): void;
}

Usage Examples:

// Get WebGL context
Component({
  onReady() {
    const canvas = this.selectComponent('#glCanvas').node;
    const gl = canvas.getContext('webgl');
    
    if (!gl) {
      console.error('WebGL not supported');
      return;
    }
    
    // Vertex shader source
    const vertexShaderSource = `
      attribute vec4 a_position;
      void main() {
        gl_Position = a_position;
      }
    `;
    
    // Fragment shader source
    const fragmentShaderSource = `
      precision mediump float;
      void main() {
        gl_Color = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;
    
    // Create and compile shaders
    const vertexShader = this.createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
    const fragmentShader = this.createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
    
    // Create program
    const program = this.createProgram(gl, vertexShader, fragmentShader);
    
    // Set up geometry
    const positions = [
      0.0, 0.5,
      -0.5, -0.5,
      0.5, -0.5
    ];
    
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
    
    // Render
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    gl.useProgram(program);
    
    const positionLocation = gl.getAttribLocation(program, 'a_position');
    gl.enableVertexAttribArray(positionLocation);
    gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
    
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  },
  
  createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
  },
  
  createProgram(gl, vertexShader, fragmentShader) {
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    return program;
  }
});

Image Processing

interface Wx {
  /** Get canvas image data */
  canvasGetImageData(options: {
    canvasId: string;
    x: number;
    y: number;
    width: number;
    height: number;
    success?(res: { data: Uint8ClampedArray; width: number; height: number }): void;
    fail?(res: any): void;
    complete?(res: any): void;
  }): void;
  
  /** Put canvas image data */
  canvasPutImageData(options: {
    canvasId: string;
    data: Uint8ClampedArray;
    x: number;
    y: number;
    width: number;
    height: number;
    success?(): void;
    fail?(res: any): void;
    complete?(res: any): void;
  }): void;
}

Usage Examples:

// Image processing
function applyFilter() {
  wx.canvasGetImageData({
    canvasId: 'imageCanvas',
    x: 0,
    y: 0,
    width: 300,
    height: 300,
    success(res) {
      const imageData = res.data;
      
      // Apply grayscale filter
      for (let i = 0; i < imageData.length; i += 4) {
        const r = imageData[i];
        const g = imageData[i + 1];
        const b = imageData[i + 2];
        const gray = r * 0.299 + g * 0.587 + b * 0.114;
        
        imageData[i] = gray;     // Red
        imageData[i + 1] = gray; // Green
        imageData[i + 2] = gray; // Blue
        // Alpha channel (i + 3) remains unchanged
      }
      
      // Put processed data back
      wx.canvasPutImageData({
        canvasId: 'imageCanvas',
        data: imageData,
        x: 0,
        y: 0,
        width: res.width,
        height: res.height
      });
    }
  }, this);
}

Types

// Canvas context type
interface CanvasRenderingContext2D {
  // Complete 2D rendering context interface
  canvas: { width: number; height: number };
  fillStyle: string | CanvasGradient | CanvasPattern;
  strokeStyle: string | CanvasGradient | CanvasPattern;
  lineWidth: number;
  font: string;
  textAlign: string;
  globalAlpha: number;
  
  // Methods for drawing, transforms, state management
  beginPath(): void;
  fill(): void;
  stroke(): void;
  fillRect(x: number, y: number, width: number, height: number): void;
  fillText(text: string, x: number, y: number): void;
  drawImage(image: any, dx: number, dy: number): void;
  scale(x: number, y: number): void;
  rotate(angle: number): void;
  translate(x: number, y: number): void;
  save(): void;
  restore(): void;
  
  // WeChat-specific
  draw(reserve?: boolean, callback?: () => void): void;
}

// WebGL types
interface WebGLRenderingContext {
  viewport(x: number, y: number, width: number, height: number): void;
  clear(mask: number): void;
  drawArrays(mode: number, first: number, count: number): void;
}

// Canvas option types  
interface CanvasToTempFilePathOption {
  canvasId?: string;
  canvas?: any;
  x?: number;
  y?: number; 
  width?: number;
  height?: number;
  destWidth?: number;
  destHeight?: number;
  fileType?: 'png' | 'jpg';
  quality?: number;
  success?(res: { tempFilePath: string }): void;
  fail?(res: any): void;
  complete?(res: any): void;
}

docs

ai-ml-apis.md

app-page-lifecycle.md

bluetooth-nfc-apis.md

canvas-graphics.md

cloud-services.md

component-system.md

core-apis.md

device-hardware-apis.md

event-system.md

index.md

payment-apis.md

tile.json