How to operate with 100% width?

[tiagocaus]

How to operate with 100% width?

[freezed]

Please be more explicit…

[tiagocaus]

Please be more explicit…

I had made the canvas thinking of the handheld, the width had been perfect.

But they decided to use a tablet, so the width got smaller.

See the image:

How to make the signature screen responsive (Width 100%) to any screen size.

Thank you.

[freezed]

(I cannot see your image)
Did the demo code work on your tablet ?

[xiaoxiaofan123]

Have the same issue.
I set the canvas width 100% height 100% in the mobile screen
Then the canvas don't work correct

[freezed]

Talk is cheap. Show us the code.

[cncolder]

Use div wrap canvas. Then use ResizeObserver listen div size change. pass to canvas.

It's complex but worked. I use useMeasure of react-use. See below:

import React from 'react'
import { useMeasure } from 'react-use'

export default () => {
	const [containerRef, { width, height }] = useMeasure();

	return (
		<div ref={containerRef} style={{ width: '100%', height: '100%' }}>
			<canvas width={width} height={height} />
		</div>
	)
}