Support

Install

$ npm install universal-canvas-context --save

Usage

import { createElement, useEffect, Fragment } from 'rax';
import createCanvasContext from 'universal-canvas-context';

function App() {
  useEffect(() => {
    createCanvasContext('canvasId', '2d').then(context => {
      context.fillStyle = 'red';
      context.fillRect(0, 0, 100, 100);
      context.draw();
    });
  }, []);

  return (<>
    <canvas id='canvasId'></canvas>
  </>)
}

You can also import from the big package:

import {createCanvasContext} from 'universal-api';

Methods

createContext(canvasId, type, options)

Only in MiniApp, the return context has valid draw method.

createContext("canvasId").then((context) => {
  context.fillStyle = 'red';
  context.fillRect(0, 0, 100, 100);
  // Only in alibaba miniapp, draw isn't an empty function
    context.draw();
});

`jsx | inline /**

• iframe: true */ import React from 'react'; export default () => (<iframe style={{ boxShadow: '0 2px 15px rgba(0,0,0,0.1)', width: '375px', height: '700px' }} src='https://herbox.online/p/109000004/app_1aKtEd7SK?previewZoom=100&view=preview&defaultPage=pages/universal-canvas-context/index&topSlider=false'></iframe> ); ```

wechat miniprogram