diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx index c125281..5064ebf 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx +++ b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx @@ -45,6 +45,7 @@ const AutoSizingCanvas: React.FC = ({painter}) => { useEffect(() => { if (sizingRef) { + console.log(`Sizing; width=${sizingRef.current.offsetWidth} height=${sizingRef.current.offsetHeight}`) setWidth(sizingRef.current.offsetWidth); setHeight(sizingRef.current.offsetHeight) } @@ -53,7 +54,7 @@ const AutoSizingCanvas: React.FC = ({painter}) => { const image: [ImageData] = useMemo(() => (width && height) ? [painter(width, height)] : null, [painter, width, height]); return ( -
+
) } diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx index df0efa2..b4d552c 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx +++ b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx @@ -32,13 +32,13 @@ import Canvas from "../src/Canvas"; import FlameHistogram from "./FlameHistogram"; import {paintLinear} from "./paintLinear"; - + ## Log display import {paintLogarithmic} from './paintLogarithmic' - + ## Color diff --git a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx index e4b8fbe..41c851a 100644 --- a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx +++ b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx @@ -53,10 +53,7 @@ export const InvertibleCanvas: React.FC = ({width, height ref={canvasRef} width={width} height={height} - style={{ - aspectRatio: width / height, - width: '75%' - }} + style={{aspectRatio: width / height}} /> ) }