npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-webview-canvas

v1.1.8

Published

A WebView Canvas mapper for React Native.

Downloads

27

Readme

react-native-webview-canvas

A component and function mapper between the Canvas API and your React Native application.

About The Project

React Native WebView Canvas is a component and function mapper between your React Native application and canvas' inside of a WebView component. It allows you to use the Canvas API without having to port the communication with a WebView yourself or use a second route to manage the WebView scripts.

View the package on NPM.

Installation

npm install react-native-webview-canvas

Usage

With the Bundle API (prefered):

import React, { Component } from "react";
import { PixelRatio } from "react-native";

import CanvasWebView, { Path2D, Image, ImageData } from "react-native-webview-canvas";

class MyCanvasComponent extends Component {
  async onLoad(canvasWebView) {
    const canvas = await canvasWebView.createCanvas();

    const pixelRatio = PixelRatio.get();
    
    canvas.width = 300 * pixelRatio;
    canvas.height = 300 * pixelRatio;

    const context = await canvas.getContext("2d");
    
    context.startBundle();

    context.fillStyle = "green";
    context.fillRect(0, 0, 300 * pixelRatio, 300 * pixelRatio);

    context.font = `${14 * pixelRatio}px sans-serif`;
    context.textAlign = "center";
    context.textBaseline = "middle";
    
    context.fillStyle = "red";
    context.fillText("Hello World", 150 * pixelRatio, 150 * pixelRatio);

    await context.executeBundle();
  };
  
  render() {
    return (
      <CanvasWebView
        width={300}
        height={300}
        onLoad={this.onLoad}
        />
    );
  };
}

Without the Bundle API:

import React, { Component } from "react";
import CanvasWebView, { Path2D, Image, ImageData } from "react-native-webview-canvas";

class MyCanvasComponent extends Component {
  async onLoad(canvasWebView) {
    const canvas = await canvasWebView.createCanvas();
    
    canvas.width = 300 * pixelRatio;
    canvas.height = 300 * pixelRatio;

    const context = await canvas.getContext("2d");

    context.fillStyle = "green";
    await context.fillRect(0, 0, 300 * pixelRatio, 300 * pixelRatio);

    context.font = `${14 * pixelRatio}px sans-serif`;
    context.textAlign = "center";
    context.textBaseline = "middle";
    
    context.fillStyle = "red";
    await context.fillText("Hello World", 150 * pixelRatio, 150 * pixelRatio);
  };
  
  render() {
    return (
      <CanvasWebView
        width={300}
        height={300}
        onLoad={this.onLoad}
        />
    );
  };
}

References

CanvasWebView

Props

  • width

Sets the width of the WebView (workspace) instance and NOT the Canvas API element.

  • height

Sets the height of the WebView (workspace) instance and NOT the Canvas API element.

  • enableViewport

If true, adds a viewport meta tag to set the pixel ratio to the device-width. By setting this to true, you won't need to use PixelRatio.get() but you will also be presented with a more blury natural outcome from the canvas on devices with large pixel ratios, such as iOS devices.

  • onLoad

Dispatches when the workspace is ready to be used. This is where you should initialize your render functions.

Methods

Creates an instance of the Canvas API.

  • async createBackgroundCanvas()

Creates an instance of the Canvas API that is not rendered.

  • async createImage()

Creates an instance of the Image API.

Canvas API

Properties

Methods

Context API (extends Bundle API)

This has no methods or properties.

Path2D API (extends Bundle API)

This has no methods or properties and follows the CanvasRenderingContext2D interface like the Path2D API except for the constructor and can be used as such:

import { Path2D } from "react-native-webview-canvas";

// ...

const path = await canvasWebView.createPath2D();

path.startBundle();

path.moveTo(0, 0);

path.lineTo(100, 0);
path.lineTo(100, 100);

await path.executeBundle();

context.fillStyle = "orange";
context.fill(path);

Image API

This has no methods or properties and follows the HTMLImageElement like the Image API except for the constructor and can be used as such:

import { Image } from "react-native-webview-canvas";

// ...

const image = await canvasWebView.createImage();

image.onload = () => {
    context.drawImage(image, 0, 0);
};

image.src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";

ImageData API

This package implements a clone of the ImageData API that is both constructed automatically by getImageData, but can also be constructed manually and be used together with Uint8ClampedArray like so:

import { ImageData } from "react-native-webview-canvas";

// ...

const dataArray = new Uint8ClampedArray(4 * 50 * 50);

for(let pixel = 0; pixel < dataArray.length; pixel += 4) {
    dataArray[pixel] = 255;

    dataArray[pixel + 3] = 255;
}

const imageData = new ImageData(dataArray, 50, 50);

context.putImageData(imageData, 0, 0);

Methods

Properties

Bundle API

The Bundle API is used to prevent issues when performing several operations synchronously, such as drawing an animation throughout each frame. Enabling this stops the instance from dispatching your property change or method call right away and instead records it for later for when you've finished your bundle and then dispatches everything in one single message.

  • startBundle()

Starts recording all method calls and property changes and does not actually dispatch anything until executeBundle is called.

  • async executeBundle()

Dispatches the collected bundle to the WebView frame, in the same order that they were recorded. This also clears the bundle list AND it stops recording, use startBundle again to keep recording changes.

  • clearBundle()

Empties the current bundle list but DOES NOT execute it. This does NOT stop recording the bundle.

  • stopBundle()

Stops recording the bundle but DOES NOT empty it.

Extended Reference

Methods

All methods in here accepts await but may not require it. To return a value, you must use await. And when not using the Bundle API, you may want to await for the method to complete before performing another operation to avoid issues. In these cases, you should instead use the Bundle API.

Properties

Each and every property here returns a Promise in the getter, this means you must await it or catch it in a callback. Keep in mind if you're using the Bundle API, anything that's not been executed will not show up.

Context API

Properties

Methods

Path2D API

Methods

Image API

Properties

Methods