2018-11-18 18:04:50 +00:00
|
|
|
import Color from "./color.js";
|
|
|
|
|
|
|
|
class Canvas {
|
2018-11-19 07:59:20 +00:00
|
|
|
constructor(width, height) {
|
2018-11-18 18:04:50 +00:00
|
|
|
this.element = document.createElement("canvas");
|
2018-11-19 07:59:20 +00:00
|
|
|
this.element.width = width;
|
|
|
|
this.element.height = height;
|
2018-11-18 18:04:50 +00:00
|
|
|
this._ctx = this.element.getContext("2d");
|
2018-11-19 14:09:43 +00:00
|
|
|
this._width = width;
|
|
|
|
this._height = height;
|
|
|
|
}
|
|
|
|
clear() {
|
|
|
|
this.resetStyle();
|
|
|
|
this._ctx.clearRect(0, 0, this._width, this._height);
|
2018-11-18 18:09:30 +00:00
|
|
|
}
|
2018-11-18 18:04:50 +00:00
|
|
|
setFillColor(color) {
|
|
|
|
this._ctx.fillStyle = color.rgba();
|
2018-11-18 18:09:30 +00:00
|
|
|
}
|
2018-11-18 18:04:50 +00:00
|
|
|
resetStyle() {
|
|
|
|
this._ctx.fillStyle = "";
|
2018-11-18 18:09:30 +00:00
|
|
|
}
|
2018-11-18 18:04:50 +00:00
|
|
|
draw(shape) {
|
2018-11-18 18:20:01 +00:00
|
|
|
this._ctx.fillStyle = shape.color.rgba();
|
2018-11-18 18:04:50 +00:00
|
|
|
shape.draw(this._ctx);
|
|
|
|
this.resetStyle();
|
|
|
|
}
|
2018-11-19 07:59:20 +00:00
|
|
|
resize(width, height) {
|
|
|
|
this.element.width = width;
|
|
|
|
this.element.height = height;
|
2018-11-19 14:09:43 +00:00
|
|
|
this._width = width;
|
|
|
|
this._height = height;
|
2018-11-19 07:59:20 +00:00
|
|
|
}
|
2018-11-18 18:04:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Canvas;
|