Canvas draw following the path

Question

I want to do the following on a HTML5 canvas / or SVG:

1. Have a background path, move cursor over and draw (fill) the background path
2. After the user complete drawing have a callback function

My problem is that I dont have any idea how to check if the drawed line is following the path.

Can someone explain me how to do this or maybe give some tips?

http://jsbin.com/reguyuxawo/edit?html,js,console,output

function drawBgPath() {
  context.beginPath();
  context.moveTo(100, 20);

  context.lineTo(200, 160);
  context.quadraticCurveTo(230, 200, 250, 120);
  context.bezierCurveTo(290, -40, 300, 200, 400, 150);
  context.lineTo(500, 90);
  context.lineWidth = 5;
  context.strokeStyle = 'rgba(0,0,0,.2)';
  context.stroke();
}

Answer 1

1. Create a hidden canvas that stores the origin path as question Canvas, lets say, as #q.

2. Draw the question on the #c.

3. When user about to draw, get the pixel value from question to see whether its on a line or not.

4. Decide the draw color by the info above.

var mousePressed = false;
var lastX, lastY;
var ctx;

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var canvasq = document.getElementById('q');
var contextq = canvasq.getContext('2d');

canvas.width = 500;
canvas.height = 500;
canvasq.width = 500;
canvasq.height = 500;

   $('#c').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#c').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#c').mouseup(function (e) {
        mousePressed = false;
    });
	    $('#c').mouseleave(function (e) {
        mousePressed = false;
    });

function drawBgPath() {
  contextq.beginPath();
  contextq.moveTo(100, 20);

  contextq.lineTo(200, 160);
  contextq.quadraticCurveTo(230, 200, 250, 120);
  contextq.bezierCurveTo(290, -40, 300, 200, 400, 150);
  contextq.lineTo(500, 90);
  contextq.lineWidth = 5;
  contextq.strokeStyle = 'rgba(0,0,0,.2)';
  contextq.stroke();
  context.drawImage(canvasq, 0, 0);
}

function Draw(x, y, isDown) {
    // If not integer, getImageData will get a 2x2 region.
    x = Math.round(x);
    y = Math.round(y);
    if (isDown) {
        var pixel = contextq.getImageData(x, y, 1, 1);
        // If the canvas is not draw by line, the opacity value will be 0.
        var color = (pixel.data[3] === 0) ? 'red' : 'purple';
        context.beginPath();
        context.strokeStyle = color;
        context.lineWidth = 5;
        context.lineJoin = "round";
        context.moveTo(lastX, lastY);
        context.lineTo(x, y);
        context.closePath();
        context.stroke();
    }
    lastX = x; lastY = y;
}

drawBgPath();
Draw();

#q {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<canvas id="c"></canvas>
<canvas id="q"></canvas>

Another way is:

1. Create 2 additional canvas, for answer and question.

2. When mouse down, draw the path on answer first.

3. Then compare answer canvas with question canvas.

4. Draw the compared answer on the canvas for show.

I'll just demo how it can be achieve here. You can clip the draw region to improve the performance.

It's somehow hard to decide whether the path is complete or not. But you can still:

1. Clip the answer image by question, then compare their pixel value one-by-one.

2. If pixel on question has color, total + 1, if both pixel have color and color is same, count + 1.

3. Check if count/total is over a specific threshold.

It may be slow if the image is large, so I'd prefer to only check it when user mouseup or click a check button. I've also tried to use .toDataURL to compare their value by string, however, its too strict and can't let you have a threshold.

var mousePressed = false;
var lastX, lastY;
var ctx;

// Question part
var qCanvas = document.createElement('canvas');
var qContext = qCanvas.getContext('2d');

var aCanvas = document.createElement('canvas');
var aContext = aCanvas.getContext('2d');

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;
qCanvas.width = 500;
qCanvas.height = 500;
aCanvas.width = 500;
aCanvas.height = 500;

   $('#c').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#c').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#c').mouseup(function (e) {
        mousePressed = false;
    });
	    $('#c').mouseleave(function (e) {
        mousePressed = false;
    });

function drawBgPath() {
  qContext.beginPath();
  qContext.moveTo(100, 20);

  qContext.lineTo(200, 160);
  qContext.quadraticCurveTo(230, 200, 250, 120);
  qContext.bezierCurveTo(290, -40, 300, 200, 400, 150);
  qContext.lineTo(500, 90);
  qContext.lineWidth = 5;
  qContext.strokeStyle = 'rgb(0,0,0)';
  qContext.stroke();
  
  // Draw Question on canvas
  context.save();
  context.globalAlpha = 0.2;
  context.drawImage(qCanvas, 0, 0);
  context.restore();
  
   // Now fill the question with purple.
  qContext.fillStyle = 'purple';
  qContext.globalCompositeOperation = 'source-atop';
  qContext.fillRect(0, 0, qCanvas.width, qCanvas.height);
}

function Draw(x, y, isDown) {
    if (isDown) {
        // First draw on answer canvas
        aContext.beginPath();
        aContext.strokeStyle = 'red';
       console.log(x, y);
        aContext.lineWidth = 5;
        aContext.lineJoin = "round";
        aContext.moveTo(lastX, lastY);
        aContext.lineTo(x, y);
        aContext.closePath();
        aContext.stroke();
      
        // Compare answer with question.
        aContext.save();
        aContext.globalCompositeOperation = 'source-atop';
        aContext.drawImage(qCanvas, 0, 0);
        aContext.restore();
        
        // Draw the result on what you want to show.
        context.drawImage(aCanvas, 0, 0);
    }
    lastX = x; lastY = y;
}

var cv = document.createElement('canvas');
cv.width = 500;
cv.height = 500;
//document.body.appendChild(cv);
var ctx = cv.getContext('2d');
function checkAnswer() {
  cv.width = 500;
  cv.height = 500;
  ctx.globalCompositeOperation = 'source-over';
  ctx.drawImage(aCanvas, 0, 0);
  ctx.globalCompositeOperation = 'destination-in';
  ctx.drawImage(qCanvas, 0, 0);
  var qData = qContext.getImageData(0, 0, 500, 500).data;
  var aData = ctx.getImageData(0, 0, 500, 500).data;
  var idx = 0, i, j;
  var count = 0, total = 0;
  for (i = 0; i < 500; ++i) {
    for (j = 0; j < 500; ++j) {
      if (qData[idx] !== 0) {
        ++total;
        if (aData[idx] === qData[idx]) {
          ++count;
        }
      }
      idx += 4;
    }
  }
  console.log(count,total);
  // Threshold.
  if (count/total > 0.95) {
    alert('Complete');
  }
}

drawBgPath();
Draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<canvas id="c"></canvas>
<button onclick="checkAnswer()">check</button>