fantasy/ui/canvas.js

import UI from "./ui.js";

class Canvas extends UI {
    constructor(width, height) {
        super(document.createElement("canvas"), width, height);

        this._blurStrength = 0;
        this._ctx = this.element.getContext("2d");
        this._ctx.filter = "blur(" + this._blurStrength + "px)";
    }
    clear() {
        this.resetStyle();
        this._ctx.clearRect(0, 0, this._width, this._height);
    }
    setFillColor(color) {
        this._ctx.fillStyle = color.rgba();
    }
    resetStyle() {
        this._ctx.fillStyle = "";
        this._ctx.filter = "blur(" + this._blurStrength + "px)";
    }
    getData() {
        return this.element.toDataURL();
    }
    draw(shape) {
        this._ctx.fillStyle = shape.color.rgba();
        shape.draw(this._ctx);
        this.resetStyle();
    }
    setSize(width, height) {
        super.setSize(width, height);

        this.element.width = width;
        this.element.height = height;
    }
    setBlurStrength(num) {
        this._blurStrength = parseInt(num) || 0;
        this._ctx.filter = "blur(" + this._blurStrength + "px)";
    }
}

export default Canvas;