Spaces:
Sleeping
Sleeping
deploy at 2024-08-24 21:28:12.995085
Browse files- digitDrawer.js +24 -4
digitDrawer.js
CHANGED
@@ -7,6 +7,15 @@ const ctx = canvas.getContext('2d');
|
|
7 |
let isDrawing = false;
|
8 |
let lastPredictionTime = 0;
|
9 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
10 |
function initializeGrid() {
|
11 |
// First, fill the entire canvas with white
|
12 |
ctx.fillStyle = 'white';
|
@@ -31,8 +40,23 @@ function startDrawing(e) {
|
|
31 |
const rect = canvas.getBoundingClientRect();
|
32 |
const x = e.clientX - rect.left;
|
33 |
const y = e.clientY - rect.top;
|
|
|
34 |
ctx.beginPath();
|
|
|
|
|
|
|
|
|
|
|
35 |
ctx.moveTo(x, y);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
36 |
}
|
37 |
|
38 |
function stopDrawing() {
|
@@ -47,10 +71,6 @@ function draw(e) {
|
|
47 |
const x = e.clientX - rect.left;
|
48 |
const y = e.clientY - rect.top;
|
49 |
|
50 |
-
ctx.lineWidth = 20;
|
51 |
-
ctx.lineCap = 'round';
|
52 |
-
ctx.strokeStyle = '#000';
|
53 |
-
|
54 |
ctx.lineTo(x, y);
|
55 |
ctx.stroke();
|
56 |
ctx.beginPath();
|
|
|
7 |
let isDrawing = false;
|
8 |
let lastPredictionTime = 0;
|
9 |
|
10 |
+
function setDrawingStyle() {
|
11 |
+
ctx.lineWidth = 20;
|
12 |
+
ctx.lineCap = 'round';
|
13 |
+
ctx.strokeStyle = '#000';
|
14 |
+
}
|
15 |
+
|
16 |
+
// Call this at the beginning of your script, after creating the canvas
|
17 |
+
setDrawingStyle();
|
18 |
+
|
19 |
function initializeGrid() {
|
20 |
// First, fill the entire canvas with white
|
21 |
ctx.fillStyle = 'white';
|
|
|
40 |
const rect = canvas.getBoundingClientRect();
|
41 |
const x = e.clientX - rect.left;
|
42 |
const y = e.clientY - rect.top;
|
43 |
+
|
44 |
ctx.beginPath();
|
45 |
+
ctx.lineWidth = 20;
|
46 |
+
ctx.lineCap = 'round';
|
47 |
+
ctx.strokeStyle = '#000';
|
48 |
+
|
49 |
+
// Draw a single point
|
50 |
ctx.moveTo(x, y);
|
51 |
+
ctx.lineTo(x, y);
|
52 |
+
ctx.stroke();
|
53 |
+
|
54 |
+
// Start a new path for potential dragging
|
55 |
+
ctx.beginPath();
|
56 |
+
ctx.moveTo(x, y);
|
57 |
+
|
58 |
+
// Trigger prediction immediately on click
|
59 |
+
predictDrawing();
|
60 |
}
|
61 |
|
62 |
function stopDrawing() {
|
|
|
71 |
const x = e.clientX - rect.left;
|
72 |
const y = e.clientY - rect.top;
|
73 |
|
|
|
|
|
|
|
|
|
74 |
ctx.lineTo(x, y);
|
75 |
ctx.stroke();
|
76 |
ctx.beginPath();
|