From 7d5f7c7a93e1b740e55cf403f7592c639cb3ecaf Mon Sep 17 00:00:00 2001
From: Ossi Laine <ossi.laine@utu.fi>
Date: Mon, 18 Mar 2019 11:12:03 +0200
Subject: [PATCH] First version of the drawing canvas

---
 app/static/js/canvas.js      | 50 +++++++++++++++++++++++++++++++-----
 app/task/templates/task.html |  2 ++
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/app/static/js/canvas.js b/app/static/js/canvas.js
index a8363ac..229135a 100644
--- a/app/static/js/canvas.js
+++ b/app/static/js/canvas.js
@@ -7,7 +7,6 @@ $(document).ready(function() {
     var canvas = $("#embody-canvas")
     var context = document.getElementById("embody-canvas").getContext("2d");
 
-
     canvas.mousedown(function(e){
         var mouseX = e.pageX - this.offsetLeft;
         var mouseY = e.pageY - this.offsetTop;
@@ -41,18 +40,48 @@ $(document).ready(function() {
     {
         clickX.push(x);
         clickY.push(y);
+
+        // ClickDrag array is unnecessary beacause all the coordinates are saved to
+        // X & Y -arrays
         clickDrag.push(dragging);
     }
 
 
     function redraw(){
-        context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
+
+        /* 
+        Check:
+        https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+
+        TODO: It's possible to use only one mask image propably
+        */
+        //context.globalCompositeOperation='destination-over' // 
+        //context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
+
+        lastX = clickX[clickX.length - 1]
+        lastY = clickY[clickY.length - 1]
+
+        // Opacity (there was 0.2 opacity in the old version):
+        context.globalAlpha = 0.2
         
-        context.strokeStyle = "#df4b26";
-        context.lineJoin = "round";
-        context.lineWidth = 5;
-                  
+        // Gradient:
+        var gradient = context.createRadialGradient(lastX, lastY, 1, lastX, lastY, 15);
+        gradient.addColorStop(0, "rgba(255,0,0,1)");
+        gradient.addColorStop(1, "rgba(255,0,0,0.1)");
+
+        // Draw circle with gradient
+        context.beginPath();
+        context.arc(lastX, lastY, 15, 0, 2 * Math.PI, false);
+        context.fillStyle = gradient
+        context.fill()
+
+        drawMaskToBaseImage()
+
+        /*
+        OLD version, where line is drawn continuously (not needed probably)
+
         for(var i=0; i < clickX.length; i++) {		
+
             context.beginPath();
 
             if (clickDrag[i] && i) { 
@@ -65,9 +94,16 @@ $(document).ready(function() {
             context.closePath();
             context.stroke();
         }
+        */
 
     }
 
+    function drawMaskToBaseImage()
+    {
+        var img = document.getElementById("baseImageMask");
+        context.globalAlpha = 1
+        context.drawImage(img, 0, 0);
+    }
 
     function drawBaseImage()
     {
@@ -78,9 +114,9 @@ $(document).ready(function() {
         context.canvas.height = height
         context.canvas.width = width
         context.drawImage(img, 0, 0);
-
         img.classList.add("hidden")
     }
 
     drawBaseImage()
+
 });
\ No newline at end of file
diff --git a/app/task/templates/task.html b/app/task/templates/task.html
index 49d185e..c9aea9a 100644
--- a/app/task/templates/task.html
+++ b/app/task/templates/task.html
@@ -101,6 +101,7 @@
   <canvas id="embody-canvas" width="200" height="100" style="border: 1px solid blue;"  ></canvas>
 
   <img id="baseImage" class="" src={{ url_for('static', filename='img/dummy_600.png') }} />
+  <img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />
   <form class="form-group mt-5" action="/task/embody/{{ page_num }}" method="post">
 
     <input id="canvas-data" type="hidden" value="" name="text">
@@ -112,6 +113,7 @@
         </div>
         <div class="col-12">
             <br>
+            <p>{{ _("Reload the page if painting canvas didn't appear.") }} </p>
             <p>{{ _('You can zoom in/out the page view by pressing ctrl+/ctrl- (Windows) or ⌘+/⌘- (Mac)') }} </p>
         </div>
     </div>    
-- 
GitLab