First version of the drawing canvas

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

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>