Hugging Face's logo

Spaces:
eaglelandsonce
/
RandomCanvasDraw
Running

App Files Community
eaglelandsonce commited on
Commit
ec0062c
·
verified ·
1 Parent(s): ee060f4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +40 -19
index.html CHANGED
@@ -7,6 +7,33 @@
7
  <style>
8
  canvas {
9
  border: 1px solid black;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  }
11
  </style>
12
  </head>
@@ -29,9 +56,7 @@
29
  ctx.fillText('Button:', 10, 30);
30
  const button = document.createElement('button');
31
  button.innerText = 'Click Me';
32
- button.style.position = 'absolute';
33
- button.style.left = '70px';
34
- button.style.top = '10px';
35
  document.body.appendChild(button);
36
  return button;
37
  }
@@ -41,9 +66,7 @@
41
  ctx.fillText('Text Input:', 10, 60);
42
  const input = document.createElement('input');
43
  input.type = 'text';
44
- input.style.position = 'absolute';
45
- input.style.left = '90px';
46
- input.style.top = '40px';
47
  document.body.appendChild(input);
48
  return input;
49
  }
@@ -53,9 +76,7 @@
53
  ctx.fillText('Color Picker:', 10, 90);
54
  const input = document.createElement('input');
55
  input.type = 'color';
56
- input.style.position = 'absolute';
57
- input.style.left = '100px';
58
- input.style.top = '70px';
59
  document.body.appendChild(input);
60
  return input;
61
  }
@@ -65,9 +86,7 @@
65
  ctx.fillText('Checkbox:', 10, 120);
66
  const input = document.createElement('input');
67
  input.type = 'checkbox';
68
- input.style.position = 'absolute';
69
- input.style.left = '80px';
70
- input.style.top = '100px';
71
  document.body.appendChild(input);
72
  return input;
73
  }
@@ -78,9 +97,7 @@
78
  const input = document.createElement('input');
79
  input.type = 'radio';
80
  input.name = 'radioGroup';
81
- input.style.position = 'absolute';
82
- input.style.left = '100px';
83
- input.style.top = '130px';
84
  document.body.appendChild(input);
85
  return input;
86
  }
@@ -90,19 +107,23 @@
90
  ctx.fillText('Range Slider:', 10, 180);
91
  const input = document.createElement('input');
92
  input.type = 'range';
93
- input.style.position = 'absolute';
94
- input.style.left = '100px';
95
- input.style.top = '160px';
96
  document.body.appendChild(input);
97
  return input;
98
  }
99
 
 
 
 
 
 
 
100
  function clearCanvas() {
101
  ctx.clearRect(0, 0, canvas.width, canvas.height);
102
  }
103
 
104
  function clearUIComponents() {
105
- const components = document.querySelectorAll('input, button');
106
  components.forEach(component => {
107
  document.body.removeChild(component);
108
  });
 
7
  <style>
8
  canvas {
9
  border: 1px solid black;
10
+ display: block;
11
+ margin: 0 auto;
12
+ }
13
+ .ui-component {
14
+ position: absolute;
15
+ transform: translate(-50%, -50%);
16
+ padding: 10px;
17
+ font-family: Arial, sans-serif;
18
+ border: 1px solid #ccc;
19
+ border-radius: 5px;
20
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
21
+ }
22
+ button {
23
+ background-color: #4CAF50;
24
+ color: white;
25
+ border: none;
26
+ padding: 10px 20px;
27
+ text-align: center;
28
+ text-decoration: none;
29
+ display: inline-block;
30
+ font-size: 16px;
31
+ margin: 4px 2px;
32
+ cursor: pointer;
33
+ border-radius: 5px;
34
+ }
35
+ input[type="range"] {
36
+ width: 200px;
37
  }
38
  </style>
39
  </head>
 
56
  ctx.fillText('Button:', 10, 30);
57
  const button = document.createElement('button');
58
  button.innerText = 'Click Me';
59
+ styleAndCenterComponent(button);
 
 
60
  document.body.appendChild(button);
61
  return button;
62
  }
 
66
  ctx.fillText('Text Input:', 10, 60);
67
  const input = document.createElement('input');
68
  input.type = 'text';
69
+ styleAndCenterComponent(input);
 
 
70
  document.body.appendChild(input);
71
  return input;
72
  }
 
76
  ctx.fillText('Color Picker:', 10, 90);
77
  const input = document.createElement('input');
78
  input.type = 'color';
79
+ styleAndCenterComponent(input);
 
 
80
  document.body.appendChild(input);
81
  return input;
82
  }
 
86
  ctx.fillText('Checkbox:', 10, 120);
87
  const input = document.createElement('input');
88
  input.type = 'checkbox';
89
+ styleAndCenterComponent(input);
 
 
90
  document.body.appendChild(input);
91
  return input;
92
  }
 
97
  const input = document.createElement('input');
98
  input.type = 'radio';
99
  input.name = 'radioGroup';
100
+ styleAndCenterComponent(input);
 
 
101
  document.body.appendChild(input);
102
  return input;
103
  }
 
107
  ctx.fillText('Range Slider:', 10, 180);
108
  const input = document.createElement('input');
109
  input.type = 'range';
110
+ styleAndCenterComponent(input);
 
 
111
  document.body.appendChild(input);
112
  return input;
113
  }
114
 
115
+ function styleAndCenterComponent(component) {
116
+ component.className = 'ui-component';
117
+ component.style.left = `${canvas.offsetLeft + canvas.width / 2}px`;
118
+ component.style.top = `${canvas.offsetTop + canvas.height / 2}px`;
119
+ }
120
+
121
  function clearCanvas() {
122
  ctx.clearRect(0, 0, canvas.width, canvas.height);
123
  }
124
 
125
  function clearUIComponents() {
126
+ const components = document.querySelectorAll('.ui-component');
127
  components.forEach(component => {
128
  document.body.removeChild(component);
129
  });