Open
Description
If you set a custom width/height to the canvas, then use toDataURL, the image exported is wrong/not the same as the image shown.
Example:
`render() {
const canvasWidth = 900
const canvasHeight = 1280
const viewWidth = 300
const viewHeight = 500
var width = viewWidth
var height = viewHeight
return (
<View style={{flex:1}}>
<Canvas
pointerEvents={'none'}
style={{ width: width, height: height, borderWidth:1}}
ref={(canvas) => {
this.canvas = canvas;
if (canvas && canvas.height != canvasHeight) {
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const context = canvas.getContext('2d');
this.canvasScaleWidth = canvasWidth / viewWidth;
this.canvasScaleHeight = canvasHeight / viewHeight;
context.fillStyle = "#FF0000";
context.fillRect(20, 10, 120, (viewHeight - 20) / PixelRatio.get());
}
}}
/>`
The exported image (I removed transparency):
And what if I use scale?
context.scale(this.canvasScaleWidth, this.canvasScaleHeight);
The view:
The exported image (I removed transparency):
Any idea how to fix? I know nothing about canvas and I was wondering what it is that you do with the matrix transformation in the source code, and if that may be the issue.
Any idea @iddan?
Thank you.
Metadata
Metadata
Assignees
Labels
No labels