Scribd
Upload
14 views4 pages

Implementation Guide

This document outlines the steps to implement a painting board using React and Vite. It includes creating a Vite app, setting up WebSocket connections, installing the React Sketch Canvas library, and configuring features like color picking and brush size selection. The final steps involve binding the canvas output to transmit drawing data via WebSocket.

Uploaded by

Chiran maduranga Aberathna
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views4 pages

Implementation Guide

This document outlines the steps to implement a painting board using React and Vite. It includes creating a Vite app, setting up WebSocket connections, installing the React Sketch Canvas library, and configuring features like color picking and brush size selection. The final steps involve binding the canvas output to transmit drawing data via WebSocket.

Uploaded by

Chiran maduranga Aberathna
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Implement the painting board

1.​ Create an empty React Vite app.

None
npm create vite@latest drawer-test

2.​ Open it on VSCode

3.​ Create [Link] file to connect to the socket

JavaScript
export const ws = new WebSocket("[Link]

// Generate a random ID for this drawer


export const userId = [Link]().toString(36).substring(2, 9);

4.​ Install React Sketch Canvas

JavaScript
npm i react-sketch-canvas

5.​ Add custom resolvers to the Vite config

JavaScript
import { resolve } from "path";

resolve: {
alias: {
react: resolve("./node_modules/react"),
},
},

6.​ Remove everything from the [Link]


7.​ Import and configure React Sketch Canvas

JavaScript
import { ReactSketchCanvas } from "react-sketch-canvas";

<ReactSketchCanvas
width="100vw"
height="100vh"
strokeWidth="10"
strokeColor="red"/>

8.​ Add a color picker

JavaScript
<input type="color" value="red"/>

9.​ Set the picked color to the canvas

JavaScript
import React, {useState} from "react";

const [color, setColor] = useState("red");

<input type="color" value={color} onChange={(e) => setColor([Link])} />

<ReactSketchCanvas width="100vw" height="100vh" strokeWidth="5"


strokeColor={color} />

10.​Add a brush width selector

JavaScript
<input type="range" min="2" max="20" value="5" />

11.​Set the picked brush size to the canvas


JavaScript
const [brushSize, setBrushSize] = useState(5);

<input type="range" min="2" max="20" value={brushSize} onChange={(e) =>


setBrushSize([Link])} />

<ReactSketchCanvas width="100vw" height="100vh" strokeWidth={brushSize}


strokeColor={color} />

12.​Check what kind of an output comes from the Canvas

JavaScript
<ReactSketchCanvas width="100vw" height="100vh" strokeWidth={brushSize}
strokeColor={color} onStroke={(data) => {
[Link]("Sketch data changed:", data);
}} />

13.​Define a transmit function

JavaScript
const transmitData = (data) => { }

import { ws, userId } from "./ws";

const transmitData = (data) => {


[Link](
[Link]({
userId: userId,
stroke: data,
}),
);
};

14.​Bind the stroke output to the transmitter

JavaScript
<ReactSketchCanvas
width="100vw"
height="100vh"
strokeWidth={brushSize}
strokeColor={color}
onStroke={(data) => {
transmitData(data);
}}
/>

15.​That’s it

You might also like