universal-canvas-context
v1.0.0
Published
--- title: createCanvasContext ---
Downloads
2,086
Readme
title: createCanvasContext
createCanvasContext
Universal canvas api.
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();
});
/**
* 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>
);