diff --git a/images/gear.svg b/images/gear.svg
new file mode 100644
index 0000000..4c02818
--- /dev/null
+++ b/images/gear.svg
@@ -0,0 +1,41 @@
+
+
+
+
diff --git a/images/paint.svg b/images/paint.svg
new file mode 100644
index 0000000..a0dbaeb
--- /dev/null
+++ b/images/paint.svg
@@ -0,0 +1,17 @@
+
+
+
+
diff --git a/main.js b/main.js
index e9f709d..feca983 100644
--- a/main.js
+++ b/main.js
@@ -1,21 +1,33 @@
import factory from "./painting/factory.js";
import Canvas from "./painting/canvas.js";
import Shape from "./painting/shape.js";
+import Button from "./ui/button.js";
document.body.innerHTML = "";
Shape.setBounding(window.innerWidth, window.innerHeight);
let canvas = new Canvas(window.innerWidth, window.innerHeight);
+
+let repaint = new Button("paint");
+repaint.addHandler(canvas.clear.bind(canvas));
+repaint.addHandler(paint);
+repaint.setPosition(50, 50);
+
+window.addEventListener("resize", onWindowResize, false);
+
document.body.appendChild(canvas.element);
+document.body.appendChild(repaint.element);
-let amount = Math.floor(Math.random() * 100 + 50);
-
-for (let i = 0; i < amount; ++i) {
- let shape = factory.createRandomShape();
- canvas.draw(shape);
-}
-
-window.addEventListener("resize", function(e) {
+function onWindowResize(e) {
Shape.setBounding(window.innerWidth, window.innerHeight);
canvas.resize(window.innerWidth, window.innerHeight);
-}, false);
\ No newline at end of file
+}
+
+function paint() {
+ let amount = Math.floor(Math.random() * 100 + 50);
+
+ for (let i = 0; i < amount; ++i) {
+ let shape = factory.createRandomShape();
+ canvas.draw(shape);
+ }
+}
\ No newline at end of file
diff --git a/painting/canvas.js b/painting/canvas.js
index e42317f..133e81f 100644
--- a/painting/canvas.js
+++ b/painting/canvas.js
@@ -6,6 +6,12 @@ class Canvas {
this.element.width = width;
this.element.height = height;
this._ctx = this.element.getContext("2d");
+ this._width = width;
+ this._height = height;
+ }
+ clear() {
+ this.resetStyle();
+ this._ctx.clearRect(0, 0, this._width, this._height);
}
setFillColor(color) {
this._ctx.fillStyle = color.rgba();
@@ -21,6 +27,8 @@ class Canvas {
resize(width, height) {
this.element.width = width;
this.element.height = height;
+ this._width = width;
+ this._height = height;
}
}
diff --git a/style.css b/style.css
index d6954bb..e15501f 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,16 @@
body {
margin: 0;
overflow: hidden;
+}
+
+button {
+ overflow: hidden;
+ background-color: aqua;
+ border: none;
+ border-radius: 50%;
+ width: 25px;
+ height: 25px;
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
}
\ No newline at end of file
diff --git a/ui/button.js b/ui/button.js
new file mode 100644
index 0000000..a88f16a
--- /dev/null
+++ b/ui/button.js
@@ -0,0 +1,31 @@
+class Button {
+ constructor(image) {
+ this.element = document.createElement("button");
+ this.element.style.backgroundImage = "url(images/" + image + ".svg)";
+ this._boundClick = this._onClick.bind(this);
+ this.element.addEventListener("click", this._boundClick, false);
+ this._handlers = [];
+ }
+ destructor() {
+ this.element.removeEventListener("click", this._boundClick);
+ delete this._boundClick;
+ delete this._handlers;
+ delete this.element;
+ }
+ addHandler(handler) {
+ this._handlers.push(handler);
+ }
+ setPosition(x, y) {
+ this.element.style.position = "absolute";
+ this.element.style.top = y + "px";
+ this.element.style.left = x + "px";
+ }
+ _onClick(e) {
+ for (let i = 0; i < this._handlers.length; ++i) {
+ this._handlers[i](e);
+ }
+ }
+
+}
+
+export default Button;
\ No newline at end of file