iddan / react-native-canvas

A Canvas component for React Native

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

react-native-canvas's Issues

Is it posible to build Canvas from html string?

My objective is have an HTML print on Canvas, then save that canvas into physical file.

Thanks,
Punleu

getImageData() & putImageData()

I would like to know about putImageData() can it work ? I try to use but I got this message error.

ref. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData

Thank you so much.

new CanvasImage(canvas);

加载远程图片，加载不出来；（Unable to load remote pictures）

How to disable zoom in/out?

I still can zoom canvas, how to turn it off? If adding meta tags to html is no longer standard when updating the component

how should I get Base64

this is my code

   const canvas = this.refs.canvas
    const image = new CanvasImage(canvas, canvas.height, canvas.width)
    let data = canvas.toDataURL()

I want to get base64 but it don't work

Promise from ctx.getImageData() never returns on Android

I'm using your package to port existing code for a Node.js program to work on React-Native and it involves drawing an image to the canvas, then reading the pixel data from the canvas. It works on iOS perfectly but when I run it on Android, the promise in ctx.getImageData never returns, so my program's execution halts at the "await", shown below. It's an awkward script but the lines in question are shown below.

        ctx.drawImage(element, 0, 0, width, height);
        ctx.font = font;
        ctx.fillStyle = fontColor;
        ctx.textAlign = textAlign;
        ctx.textBaseline = textBaseline;
        ctx.fillText("Text Overlay", textXCoordinate, textYCoordinate);

        console.log("A")
        imageData = await ctx.getImageData(0, 0, width, height);
        console.log("B")

Both console logs print on iOS, and the image data is accessible but on Android, "A" gets printed and nothing else happens. Because of the structure of your files in the way they inherit methods and properties from webview classes, I'm finding it really hard to debug what's going wrong. Any idea what could be causing this?

Not working on production

Canvas is not viewing when loading from pre bundled source or in production.

Can't find variable Symbol on Android and logs problem on iOS

Hi iddan,

I tried to install version 0.1.3 but I couldn't get it works on Android. It says "Can't find variable Symbol".

On iOS, it works but really slow, I checked logs on Xcode and saw that it throws a lot of json logs. Is it possible to remove it?

Thank you and best regards,
Truc.

设置canvas的width，height后，图像无法显示

本来我的功能是正常的，后来我想动态的改变canvas的宽度和高度，但是在 canvas.width = img.width； canvas.height = img.height后，我再去选择图片，图片没有在屏幕上显示，一片空白

Is there a limit to the width and height

ctx.fillRect(0, 0, 300, 300);
but it is a rectangle, the height isn't 300

Maximum of height and width

maximum of height and width is 100 ??,

I've try to run your example code in local but this think is happen.

Possible Unhandled Promise Rejection (id: 0):
Error: Unable to open URL: file:///
Error: Unable to open URL: file:///
at createErrorFromErrorData (blob:http://localhost:8081/f817db7d-0270-489b-9116-5ea0036b4e8a:2270:17)

How to fixed it? or I do something wrong?

error during "npm install react-native-canvas@latest --save"

i get an error when i try to execute npm install react-native-canvas@latest --save
this is the log:

npm ERR! git rev-list -n1 webview-improvements: fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 webview-improvements: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 webview-improvements: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 webview-improvements:
npm ERR! Darwin 15.0.0
npm ERR! argv "/Users/WellDone2044/.nvm/versions/node/v4.1.0/bin/node" "/Users/WellDone2044/.nvm/versions/node/v4.1.0/bin/npm" "install" "react-native-canvas@latest" "--save"
npm ERR! node v4.1.0
npm ERR! npm  v2.14.3
npm ERR! code 128

npm ERR! Command failed: git rev-list -n1 webview-improvements
npm ERR! fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! Use '--' to separate paths from revisions, like this:
npm ERR! 'git <command> [<revision>...] -- [<file>...]'
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/WellDone2044/Dropbox/Develop/Appy_Bross/test_react-native/camera_test/npm-debug.log

npm -v --> 2.14.3
node -v --> 4.1.0

this component can not work~

this component can not work~ what is the problem? status code 500

It Was Not Install...

npm install react-native-canvas@latest --save

Issues are:
npm ERR! git rev-list -n1 webview-improvements: fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 webview-improvements: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 webview-improvements: 'git [...] -- [...]'
npm ERR! git rev-list -n1 webview-improvements:
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/Cellar/node/6.7.0/bin/node" "/usr/local/bin/npm" "install" "react-native-canvas" "--save"
npm ERR! node v6.7.0
npm ERR! npm v3.10.7
npm ERR! code 128

npm ERR! Command failed: git rev-list -n1 webview-improvements
npm ERR! fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! Use '--' to separate paths from revisions, like this:
npm ERR! 'git [...] -- [...]'
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /Users/varmabhupatiraju/Desktop/Coordinates/npm-debug.log

x draw image dynamic width and height

Doesn't work on Android 4 & 5 when used with Expo

The trouble has been reproduced with your example too (https://www.npmjs.com/package/react-native-canvas).
Please see screenshot below. Digits were added for debugging (as text, before and after "Canvas" object rendering).

Used versions:
[email protected]
[email protected]
[email protected]

Tested on Android 4.4 and 5.1

Dev machine OS: Linux

Android Canvas Scroll

is there any way to disable scroll in android ? i have a canvas which scrolls vertically.

How can i change the width of webview?

I use canvas to show a chart, but the webview width is always 300, can i change it?

measureText('xxx').width is undefined?

Can't get measureText('xxx').width?

Installation error

"react-native-canvas": "^0.1.9", "react": "16.0.0-alpha.12", "react-native": "0.45.1",

0.1.20 can't work on android

on the Genymotion android ,it can work. but I use HTC, it can't draw image . I find some issues say out of the scope of WebView library. but how can I save this problem

Waiting for text measurements slowing down draw speed

For a current project of mine I am using the following snippet to draw and wrap Text: https://stackoverflow.com/questions/2936112/text-wrap-in-a-canvas-element/19894149#19894149

The problem with this implementation of the canvas is that getting the text measurements is an asynchronous process. I had to label the function as async and added await labels on the measureText function.

Using this "fix" now gives me quite the paint flashing, each text appearing with a slight delay.

Is there a reason for the asynchronous nature of the method?
Cheers and thanks for the lib!

Is it possible to pass in an image, and get the RGB back?

Is it possible to pass in an image, and get the RGB back?

how to draw local image on canvas using react-native-canvas

Hi,
Thank you for the package.
I have followed instructions in the source and I am not able to draw image on canvas if image's source is within a project.

here is the code:

import React from 'react';
import { StyleSheet} from 'react-native';
import Canvas, {Image as CanvasImage} from 'react-native-canvas';


export default class App extends React.Component {
  handleCanvas =  (canvas) => {
    const image = new CanvasImage(canvas);
    canvas.width = 100;
    canvas.height = 100;
    
    const context = canvas.getContext('2d');

    image.src = './dys.jpg';

    //'https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg'; Note: with this uri everything works well

     image.addEventListener('load', () => {
      debugger
      console.log('image is loaded');
      context.drawImage(image, 0, 0, 100, 100);
    }); 
  }

  render() {
    return (
      <Canvas ref={this.handleCanvas}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Is it possible to set image.src to local path?

Thank you once again.
Regards,
Zoran

react-native-canvas draw arc android not working perfect.

react-native: 0.47.2
react-native-canvas: 0.1.20

I am drawing the arc using react-native-canvas.
It works fine on iOS but on android it's looking blurring.

Android Screenshot:

iOS Screenshot:

handleCanvas = (canvas) => {
    if (canvas) {
      const { percent } = this.props
      const width = this.props.width <= 150 ? this.props.width : 150
      const height = this.props.height <= 150 ? this.props.height : 150
      this.canvas = canvas
      if (Platform.OS === 'ios') {
        this.canvas.width = width
        this.canvas.height = height
      }
      this.ctx = this.canvas.getContext('2d')
      this.draw(percent)
    } else {
      //console.log("Canvas Null")
      return
    }
  }
  draw(percent) {
    const { hslH, lineWidth, step, dark } = this.props
    const width = this.props.width <= 150 ? this.props.width : 150
    const height = this.props.height <= 150 ? this.props.height : 150
    this.ctx.clearRect(0, 0, width, height)
    this.ctx.save()
    const start = -Math.PI/2;
    const end = -Math.PI/2 + 2 * Math.PI * percent / 100;
    const t = lineWidth;
    const radius = (width - t) / 2;
    this.ctx.beginPath()
    this.ctx.arc(width / 2, height / 2, radius, start, 1.5 * Math.PI)
    this.ctx.lineWidth = t
    if (dark) {
      this.ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)'
    } else {
      this.ctx.strokeStyle = 'rgba(100, 100, 100, 0.2)'
    }
    this.ctx.lineCap='round'
    this.ctx.lineJoin = 'round'
    this.ctx.stroke()
    if (percent > 0) {
      const gradient = this.ctx.createLinearGradient(0, width, 0, 0)
      .then(gradient => {
        gradient.addColorStop(0, 'hsl(' + hslH + ', 100%,' + 80 + '%)')
        gradient.addColorStop(1, 'hsl(' + hslH + ', 100%,' + 50 + '%)')
        this.ctx.beginPath()
        this.ctx.arc(width / 2, height / 2, radius, start, end, false)
        this.ctx.strokeStyle = gradient
        this.ctx.lineWidth = t
        this.ctx.lineCap='round'
        this.ctx.lineJoin = 'round'
        this.ctx.stroke()
      })
    }
  }

....

<Canvas ref={this.handleCanvas}/>

....

Anyone has similar experiences?

custom postMessage crashes react-native-canvas

I'm porting a mini-game which uses canvas. This requires user interaction, so I injected a touch handler that posts a message to pass the event back to the RN side.

    this.onkeypress = 'window.addEventListener("touchstart", function (e) { window.postMessage("touchstart") } );';
    canvas.webview.injectJavaScript(this.onkeypress);

However, handleMessage() in Canvas.js tries to parse this as JSON which crashes.

    var data = JSON.parse(e.nativeEvent.data);

I tried passing in serialized JSON, but the rest of the code needs id, meta, and payload fields in a specific way which the app has no visibility into. I got it to work by wrapping the JSON.parse in a try-catch block, and if it catches, pass data directly to listeners and skip the rest including the bus call.

Would you be interested in a PR? Or is there a better way to accomplish this?

Render children elements

Is it possible to render children elements in <Canvas>?

I want to render TouchableOpacity over the canvas.
I've tried, but no success, I think it is discarded. Is there any way to do this?

<Canvas ... >
  <TouchableOpacity ... >
    <Image ... />
  </TouchableOpacity>
</Canvas>

canvas height 不可以更改？

我改了canvas默认宽高还是被隐藏是怎么回事呢

Rendering base64 images with react-native-canvas

I'm trying to render a base64 image on the canvas but keep getting an error: 'TypeError: type error'.

I'm using the `' component in react-native and passing this into the drawImage function of the context:

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = `data:image/jpeg;base64,${this.state.imageURI}`
    img.onLoad = function() {
      ctx.drawImage(img, 0, 0, 100, 100);
    }
  }

<Canvas ref={this.handleCanvas}/>

context.getImageData fails only after image is drawn to canvas

Hey, another issue for you. Possibly related to my issue from before but, as the title says, the call to context.getImageData(...) fails after an image file has been drawn to the canvas. This can be recreated in your example project simply by adding the following line after line 41 of app.js

context.drawImage(image, 0, 0, 100, 100); // Existing call to draw image to canvas
context.getImageData(0, 0, 100, 100); // New async call to request the bitmapped data just drawn

By adding the above line of code, I get the following error
"Cannot read property 'constructor' of undefined"
And the stack trace shows the error is being thrown at Canvas.js line 169, where properties of the retrieved data are being read.

If I put that line of code elsewhere in the file, it runs fine. For instance, if I print the value returned from awaiting that call, I can see all of the pixel data of the circle, the path, the gradient, etc. and even if I put the line of code ABOVE the call to context.drawImage(...), it returns fine with a 100x100 grid of blank pixels. It only ever seems to throw the error if I make the call after drawing an image to the canvas. I've also tried setting a timeout on the getImageData call to ensure the image has fully completed drawing.

This issue presents on all my android devices but not iOS.

I'll be happy to be of help if you need more data. Hopefully you can recreate the issue as easily as me

width larger than 300?

Im trying to set the canvas width larger than 300 but I cant, anyway to do this or a allow preview?

gradient.addColorStop is not a function

Hi, just found this module today, looks great so far.

However the project I am trialling it for requires radial gradients, but i get the error above when I try to add a color stop to a gradient.

Thanks!

Width and height can't be set on iOs simulator

Thanks for the library, so far so good!

I tried using it by setting a width and height to some values, but whatever I do they remain at 300x150. Meaning:

render() {
    return <Canvas width={80} height={80} />
}

and then immediately in componentWillReceiveProps or any other:
console.log(canvas.width, canvas.height) - prints 300, 150

I was looking at your source and I see webviewProperties({ width: 300, height: 150}) - it must be related to that. I didn't try this on an Android simulator yet, but once I have that info I'll share.

Again, thanks for the library!

How to display SVG images?

Using the example I was able to display images from url. But how can I display local images like a svg from source string?

how can refresh the Canvas

how can refresh the Canvas

Canvas doesn't render in HiDPI

red circle looks fuzzy

Extract a thumbnail from a video possibility?

Is it possible to use an .mp4 (or other video format) source for a canvas, instead of an image file, and output a base64 image from one of it's video frames? Even if it's just the first frame could be useful.

Video manipulation by frames seems to be possible within the original Canvas API

I tried the following which works when LOCAL_FILE_LOCATION is an image file, but doesn't if it's a video file:

handleVideoThumb = async (canvas) => {
console.log('handleVideoThumb called');
const image = new CanvasImage(canvas, 100, 100);

canvas.width = 100;
canvas.height = 100;

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

image.src = LOCAL_FILE_LOCATION;

image.addEventListener('load', async () => {
    console.log('image is loaded');
    context.drawImage(image, 0, 0, 100, 100);
    const dataURL = await canvas.toDataURL('image/jpeg');
    console.log('dataURL: ', dataURL);
});}

Error on install

$ npm install react-native-canvas@latest --save
npm ERR! git rev-list -n1 webview-improvements: fatal: ambiguous argument 'webview-improvements': unknown revision or path not in the working tree.
npm ERR! git rev-list -n1 webview-improvements: Use '--' to separate paths from revisions, like this:
npm ERR! git rev-list -n1 webview-improvements: 'git <command> [<revision>...] -- [<file>...]'
npm ERR! git rev-list -n1 webview-improvements: 
npm ERR! Darwin 15.6.0

Canvas drawImage from local file is not working on Android

Following code work on iOS but not on Android.

  handleCanvas = canvas => {
    const context = canvas.getContext('2d');
    const image = new CanvasImage(canvas);
    const filePath = '/path/to/image.jpg';
    image.src = Platform.OS === 'android' ? `file://${filePath}` : filePath;
    image.addEventListener('load', () => {
      context.drawImage(image, 0, 0, 200, 200);
    });
  };

Canvas is not rendering anything

I beleive there is something wrong with the new update v0.1.11.

Animation

I apologise if this is not the place to ask this question, but I am reaching out for some help.

I am trying to animate the shape I draw using your Canvas implementation ( thank you for your creation) but I loose the context of the canvas when I attempt to re-render my component from a state change or a props changes via Redux.

null is not an object (evaluating 'canvas.getContext');

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

render() {
return (

)
}`

Following your example, however I had to bind this.handleCanvas so I could access 'this' from within handleCanvas. When I call a state update or a Redux action from within handleCanvas, re-rendering does not work, this is when I receive the error.

Any help would be greatly appreciated, thanks.

How to drawImage?

Helps me?
I want to create a drawing application on an image. I cant found HTMLImageElement in react-native.

Does it work in Android

Your simple example works in ios, but in android the rectangle is not rendered. Maybe I'm missing something, but it seems really, really simple. Just doesn't render.

Calling ctx.measureText return null

AddEventListener will not trigger in Android

  splitImage (canvas, x, y, rows, cols) {
    const {height, width} = Dimensions.get('screen')
    const CanvasXSize = width / cols - 2
    const CanvasYSize = (height / 2) / rows
    canvas.width = CanvasXSize
    console.log('CanvasXSize',CanvasXSize);
    canvas.height = CanvasYSize
    const ctx = canvas.getContext('2d')
    const img = new CanvasImage(canvas)

    img.src = "https://scontent-sin6-2.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/21820297_280457069027480_5332287299113713664_n.jpg"

    img.addEventListener('load', () => {
      this.setState({ test: 'load' })
      const imgW = img.width
      console.log('imgW', imgW)
      const imgH = img.height
      const chunkWidth = imgW / cols
      console.log('chunkWidth', chunkWidth)
      const chunkHeight = imgH / rows
      ctx.drawImage(
        img,
        x * chunkWidth,
        y * chunkHeight,
        chunkWidth,
        chunkHeight,
        0,
        0,
        CanvasXSize,
        CanvasYSize
      )
    }, false)
  }

I'm trying to split image based on the row and col and i manage to get everything working in ios but on android it can't seem to trigger load event, did anyone know why and how to solve it?

`Cannot read property constructor of undefined` when drawing image on iOS 9.2

I have tried to draw image on canvas following the code of example, but got errors above.

Then I tried to run example's code but got the same result.

"react": "16.0.0",
"react-native": "0.51.0",
"react-native-canvas": "^0.1.20",

canvas.toDataURL() returns image with width 4 times and height 2 times bigger

Hello. Thank you for this awesome package.

I'm testing getting image data from canvas and i found that image size returned after canvas.toDataURL() call is 4 times in width and 2 times in height bigger than canvas width and height.
Could you point me what i'm doing wrong please or tell me if it's a bug. My code looks the following way:

handleCanvas(canvas) {
       this.canvas = canvas;
        canvas.width = 200;
        canvas.height = 300;
        const context = canvas.getContext('2d');
        const image = new CanvasImage(canvas);
            image.addEventListener('load', () => {
                    context.drawImage(
                        image,
                        0,
                        0
                    );
            });
            image.src = `data:image/jpeg;base64,${this.imageData}`;
        });
    }

...

this.canvas.toDataURL('image/jpeg')
     .then((data) => {
          // By the way here data is wrapped in quotes by some reason, so we need to remove them
          data = data.substring(1);
          data = data.slice(0, -1);

          if (data.indexOf('data:image/jpeg;base64,') > -1) {
               // Removing "data:image/jpeg;base64," for saving into file as base64 data
                data = data.substring(23);
          }
          RNFetchBlob.fs.writeFile(this.path, data, 'base64')
               .then(() => {
                    // Image data saved and has 200x4 pixels width and 300x2 pixels height
               })
     }

For saving image react-native-fetch-blob package is used

Thanks in advance

canvas.toDataURL() returns a transparent image

Hello, I made a simple canvas which superpose two images and I would like to get the Data64 (or even a jpg file) of it but when I do canvas.toDataURL() the output is:

Promise { "_40": 0, "_55": null, "_65": 0, "_72": null, }

Is it normal ?

any progress ?

I note that this repo is unmaintained, but you mention a new version you are working on.

Is this still progressing ? I only ask as it would be super useful for me to be able to use canvas in RN.

Thanks!

J