42 lines
No EOL
1.2 KiB
TypeScript
42 lines
No EOL
1.2 KiB
TypeScript
import React, { useEffect, forwardRef } from "react";
|
|
|
|
interface CanvaProps {
|
|
name: string;
|
|
price: string;
|
|
}
|
|
|
|
const Canva = forwardRef<HTMLCanvasElement, CanvaProps>((props, ref) => {
|
|
useEffect(()=>{
|
|
const canvas = (ref as React.RefObject<HTMLCanvasElement> | null)?.current;
|
|
|
|
if (!canvas) return;
|
|
const context = canvas.getContext("2d")
|
|
if (!context) return;
|
|
|
|
canvas.width = 296
|
|
canvas.height = 152
|
|
context.fillStyle = "#ffffff"
|
|
context.fillRect(0, 0, canvas.width, canvas.height)
|
|
context.font = "24px 'Inter', Arial"
|
|
context.textAlign = "center"
|
|
context.fillStyle = "#000000"
|
|
context.fillText(props.name, canvas.width/2, 50)
|
|
context.font = "48px 'Inter', Arial";
|
|
context.fillStyle = "#000000";
|
|
context.fillText(`$${props.price}`, canvas.width / 2, 110);
|
|
|
|
}, [props.name, props.price, ref]);
|
|
|
|
return (
|
|
<div style={{
|
|
display: 'flex',
|
|
marginTop: '20px'
|
|
}}>
|
|
<canvas ref={ref} style={{
|
|
border: '1px solid black'
|
|
}}></canvas>
|
|
</div>
|
|
)
|
|
});
|
|
|
|
export default Canva; |