diff --git a/client/ui/SkribblCanvas.js b/client/ui/SkribblCanvas.js index 0fd71f826c8b1451b5022430ca904997125067ad..d05743490596e4f845dfffbccd894970f50f4015 100644 --- a/client/ui/SkribblCanvas.js +++ b/client/ui/SkribblCanvas.js @@ -35,6 +35,7 @@ export default class SkribblCanvas extends CustomElement { this._radius = 10; this._color = "red"; this._client = client; + this._backgroundColor = "white"; /** * looks what kind of order is given, then either draws, erases(=drawing with background color), changes the backgroundcolor or clears the canvas @@ -48,6 +49,8 @@ export default class SkribblCanvas extends CustomElement { ctx.lineCap = "round"; if (order.action == "draw") { + console.log("I draw"); + let x = 960 * order.points[0].x / 1000; let y = 720 * order.points[0].y / 1000; ctx.beginPath(); @@ -59,6 +62,7 @@ export default class SkribblCanvas extends CustomElement { ctx.strokeStyle = order.color; ctx.stroke(); } else if (order.action == "erase") { + console.log("I erase"); let x = 960 * order.points[0].x / 1000; let y = 720 * order.points[0].y / 1000; ctx.beginPath(); @@ -70,10 +74,13 @@ export default class SkribblCanvas extends CustomElement { ctx.strokeStyle = this._backgroundColor; ctx.stroke(); } else if (order.action == "changeBackgroundColor") { + console.log("I change BGColor"); this._backgroundColor = order.color; ctx.fillStyle = order.color; ctx.fillRect(0, 0, this._canvas.width, this._canvas.height); } else if (order.action == "clearCanvas") { + console.log("I clear canvas"); + ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); } @@ -194,7 +201,7 @@ export default class SkribblCanvas extends CustomElement { */ /** @param {boolean} penActive */ set penActive(penActive) { - this._penActive = false; + this._erasorActive = false; this._penActive = penActive; } }