mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2025-07-29 03:25:03 -04:00
Code Issues Releases Wiki Activity

More writing. Hopefully can finish the first draft soon

Browse Source
This commit is contained in:
Bradlee Speice
2024-12-13 23:28:35 -05:00
parent b526b02e7b
commit 9b1a3895d0
6 changed files with 71 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
blog/2024-11-15-playing-with-fire/src/Canvas.tsx
View File

@ -1,4 +1,4 @@
import React, {useEffect, useState, createContext, useRef} from "react";
import React, {useEffect, useState, createContext, useRef, MouseEvent} from "react";
import {useColorMode} from "@docusaurus/theme-common";
type PainterProps = {
@ -8,6 +8,13 @@ type PainterProps = {
}
export const PainterContext = createContext<PainterProps>(null)
const downloadImage = (e: MouseEvent) => {
const link = document.createElement("a");
link.download = "flame.png";
link.href = (e.target as HTMLCanvasElement).toDataURL("image/png");
link.click();
}
type CanvasProps = {
style?: any;
children?: React.ReactElement
@ -86,7 +93,7 @@ export const Canvas: React.FC<CanvasProps> = ({style, children}) => {
<>
<center>
<div ref={sizingRef} style={style}>
{width > 0 ? <canvas {...canvasProps}/> : null}
{width > 0 ? <canvas {...canvasProps} onDoubleClick={downloadImage}/> : null}
</div>
</center>
<PainterContext.Provider value={{width, height, setPainter}}>