Neoplastic Plasma Medusa

    react-native-canvas
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-native-canvas package

    0.1.38 • Public • Published

    react-native-canvas

    A Canvas component for React Native

    npm install react-native-webview
    react-native link react-native-webview
    npm install react-native-canvas

    Usage

    import React, { Component } from 'react';
    import Canvas from 'react-native-canvas';
    
    class App extends Component {
    
      handleCanvas = (canvas) => {
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'purple';
        ctx.fillRect(0, 0, 100, 100);
      }
    
      render() {
        return (
          <Canvas ref={this.handleCanvas}/>
        )
      }
    }

    API

    Canvas

    Canvas#height

    Reflects the height of the canvas in pixels

    Canvas#width

    Reflects the width of the canvas in pixels

    Canvas#getContext()

    Returns a canvas rendering context. Currently only supports 2d context.

    Canvas#toDataURL()

    Returns a Promise that resolves to DataURL.

    CanvasRenderingContext2D

    Standard CanvasRenderingContext2D. MDN. Only difference is await should be used to retrieve values from methods.

    const ctx = canvas.getContext('2d');

    Image

    WebView Image constructor. Unlike in the browsers accepts canvas as first argument. MDN

    const image = new Image(canvas, height, width);

    Keywords

    none

    Install

    npm i react-native-canvas

    DownloadsWeekly Downloads

    3,257

    Version

    0.1.38

    License

    MIT

    Unpacked Size

    68.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • iddan