🎆 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';

const App = () => {
  const handleCanvas = (canvas) => {
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
  };

  return (
    <Canvas ref={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);

Path2D

Path2D API constructor. Unlike in the browsers, this requires the canvas as first argument. See also https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D.

const path = new Path2D(canvas);