React-pdf: Canvas is still undefined

Created on 11 Jun 2019  路  3Comments  路  Source: diegomura/react-pdf

Describe the bug
Canvas is still undefined

To Reproduce

import React, { PureComponent } from 'react'
import ReactPDF, { Page, Text, View, Image, Canvas } from '@react-pdf/renderer'

export class OverviewPage extends PureComponent {
  render () {
    console.log('Canvas is', Canvas)
    return (
      <Page
        orientation='landscape'
        size='A4'
        style={styles.page}
        debug={debugFlag}
      >
        <View>
          <Canvas
            paint={painter =>
              painter
                .moveTo(100, 150)
                .lineTo(100, 250)
                .lineTo(200, 250)
                .fill('#FF3300')
            }
          />
        </View>
      </Page>
    )
  }
}

Expected behavior
Canvas should be defined

Screenshots
console log says:
Canvas is undefined

Desktop (please complete the following information):

  • OS: MacOS
  • Browser Chrome
  • React-pdf version v1.6.2

Most helpful comment

@benbenedek I didn't noticed that you are using react-pdf on Node. And there Canvas was missing indeed. My bad.

Fixed here. Publishing a new version today

All 3 comments

Any updates on this?

@benbenedek you need to specify a size for example, the below works for me.

`
// Create styles
const styles = StyleSheet.create({
body: {
paddingTop: 35,
paddingBottom: 65,
paddingHorizontal: 35,
},
circle: {
width: 100,
height: 100,
},
});

const CanvasPage = () => (
paint={painter => painter.circle(50, 50, 10).fill('#FF3300')}
style={styles.circle}
/>

)

`

@benbenedek I didn't noticed that you are using react-pdf on Node. And there Canvas was missing indeed. My bad.

Fixed here. Publishing a new version today

Was this page helpful?
0 / 5 - 0 ratings