Skip to content
A Canvas component for React Native
JavaScript HTML
Branch: master
Clone or download

Latest commit

iddan Merge pull request #175 from CodeAnnihilator/ios-display-app-fix
added fix to display canvas on load on ios
Latest commit 9977928 Feb 18, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode - Updated dependencies Aug 11, 2018
example Bump js-yaml from 3.12.1 to 3.13.1 in /example Oct 16, 2019
src added fix to display canvas on load on ios Feb 18, 2020
.babelrc
.eslintrc
.gitignore
.npmignore
bundle-html.js - Updated dependencies Aug 11, 2018
package.json 0.1.36 Jan 3, 2020
readme.md
yarn.lock Merge pull request #141 from iddan/dependabot/npm_and_yarn/lodash-4.1… Aug 29, 2019

readme.md

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);
You can’t perform that action at this time.