diff --git a/painting/canvas.js b/painting/canvas.js index d7ef662..d120be6 100644 --- a/painting/canvas.js +++ b/painting/canvas.js @@ -1,18 +1,19 @@ import Color from "./color.js"; class Canvas { + element; constructor() { this.element = document.createElement("canvas"); this.element.width = 1000; this.element.height = 1000; this._ctx = this.element.getContext("2d"); - }, + } setFillColor(color) { this._ctx.fillStyle = color.rgba(); - }, + } resetStyle() { this._ctx.fillStyle = ""; - }, + } draw(shape) { this._ctx.fillStyle = shape._color.rgba(); shape.draw(this._ctx); diff --git a/painting/color.js b/painting/color.js index 5758344..426b4a2 100644 --- a/painting/color.js +++ b/painting/color.js @@ -17,7 +17,7 @@ class Color { this._g = g; this._b = b; this._a = a; - }, + } rgba() { let out = "rgba("; out += Math.floor(this._r * 255); @@ -30,7 +30,8 @@ class Color { out += ")"; return out; - }, + } + static random() { return new Color(Math.random(), Math.random(), Math.random(), Math.random()); } diff --git a/painting/rectangle.js b/painting/rectangle.js index e0399c5..53700c3 100644 --- a/painting/rectangle.js +++ b/painting/rectangle.js @@ -1,13 +1,18 @@ import Shape from "./shape.js"; class Rectangle extends Shape { - className: "Rectangle", + className = "Rectangle"; + constructor(x, y, color, width, height) { super(x, y, color); this._width = width; this._height = height; - }, + } + draw(context) { + context.fillRect(this._x, this._y, this._x + this._width, this._y + this._height); + } + static randomOptions() { opts = super.randomOptions(); @@ -15,12 +20,9 @@ class Rectangle extends Shape { opts.height = Math.floor(Math.random() * maxHeight); return opts; - }, + } static fromOptions(o) { return new Rectangle(o.x, o.y, o.color, o.width, o.height); - }, - draw(context) { - context.fillRect(this._x, this._y, this._x + this._width, this._y + this._height); } } diff --git a/painting/shape.js b/painting/shape.js index 0ce37f9..d596e46 100644 --- a/painting/shape.js +++ b/painting/shape.js @@ -1,22 +1,25 @@ import Color from "./color.js"; class Shape { - className: "Shape", + className = "Shape"; + color; + constructor(x, y, color) { this._x = x; this._y = y; this.color = color; - }, + } draw(context) { throw new Error("A pure virtual method call of a shape " + this.className); - }, + } + static randomOptions() { return { x: Math.floor(Math.random() * maxX), y: Math.floor(Math.random() * maxY), color: Color.random() } - }, + } static fromOptions(o) { return new Shape(o.x, o.y, o.color); }