Code: Select all
const [screenWidth, setScreenWidth] = useState(window.screen.width);
const screenFun = () => {
setScreenWidth(window.screen.width)
}
const playerFun = (screenWidth) => {
if(screenWidth >= 2100){
console.log('width bigger than 2100')
setPlayerWidth(18);
setPlayerHeight(12);
};
if(screenWidth >= 1850 && window.screen.width < 2100){
console.log('width bigger than 1850')
setPlayerWidth(30);
setPlayerHeight(20);
};
}
const Canvas = props => {
const canvasRef = useRef(null);
useEffect(() =>{
const canvas = canvasRef.current
const context = canvas.getContext('2d')
setCanvasWidth((canvas.width*(0.5))-10);
setCanvasHeight((canvas.height*(0.5))-15);
console.log('width: '+canvas.width+' height is: '+canvas.height)
context.fillStyle = '#00f4cc'
context.fillRect(canvasWidth, canvasHeight, playerWidth, playerHeight)
},[])
return
}
useEffect(() =>{
screenFun();
})
useEffect(() =>{
playerFun();
},[screenWidth])