HTML canvas art, generate coordinates data from sketch

Question

I use HTML5 canvas to draw a heart shape: ```

Accepted Answer

Recorder

Fiddle demo

You need a way to record your points so you can reproduce them as a string, array etc.

This will record anything you draw onto the canvas:

```
var points = [],    /// holds strokes and points
    isDown = false, /// for draw mode
    prevX, prevY;   /// for draw mode
```

At the first click, record the first point:

```
canvas.onmousedown = function(e) {

/// adjust mouse position (see below)
    var pos = getXY(e);

/// this is used to draw a line
    prevX = pos.x;
    prevY = pos.y;

/// add new stroke
    points.push([]);

/// record point in this stroke
    points[points.length - 1].push([pos.x, pos.y]);

/// we are in draw mode   
    isDown = true;
}
```

Then it's simply a matter of pushing all the points drawn to the current stroke:

```
canvas.onmousemove = function(e) {

if (!isDown) return;

var pos = getXY(e);

/// draw a line from previous point to this        
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();

/// set previous to this point
    prevX = pos.x;
    prevY = pos.y;

/// record to current stroke
    points[points.length - 1].push([pos.x, pos.y]);
}
```

And on mouse up; in the demo it produces the points as string which can be copied directly into your JS code:

```
canvas.onmouseup = function() {
    isDown = false;
    coords.innerHTML = JSON.stringify(points);
}
```

We adjust the mouse position so it becomes relative to canvas:

```
function getXY(e) {
    var r = canvas.getBoundingClientRect();
    return {x: e.clientX - r.left, y: e.clientY - r.top}
}
```

Render

Now that we have the points recorded we need a way to reproduce them.

This snippet is able to render the strokes and points we just recorded - for the demo I set red color to differentiate between rendered strokes and drawn:

```
function renderPoints(points) {

ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = '#f00';

/// get a stroke
    for(var i = 0, t, p, pts; pts = points[i]; i++) {

/// render stroke
        ctx.beginPath();
        ctx.moveTo(pts[0][0], pts[0][2]);
        for(t = 1; p =pts[t]; t++) {
            ctx.lineTo(p[0], p[1]);
        }
        ctx.stroke();
    }
    ctx.strokeStyle = '#000';
}
```

Conclusion

This heart (?!):

produces these points for you:

[[[103,99],[103,100],[103,98],[105,93],[115,79],[129,61],[139,52],[145,49],[149,49],[152,51],[154,54],[155,57],[156,65],[154,79],[152,89],[149,99],[145,110],[139,124],[131,142],[118,163],[108,176],[101,184],[97,185],[94,187],[87,187],[76,180],[65,166],[60,156],[54,145],[46,119],[41,98],[39,84],[39,81],[39,79],[39,77],[39,76],[40,75],[42,74],[43,72],[46,69],[47,67],[48,67],[49,67],[50,67],[51,68],[52,69],[54,70],[61,75],[71,87],[82,101],[84,105],[87,108],[89,111],[89,112],[89,113],[89,114],[89,115],[89,116],[90,118]]]

They can be given directly to the render method, or the stroke/point array can be made more sophisticated by that you prefix it with some code to allow you to copy-and-paste the produced string directly, for example:

```
var code = '    var points = ' + JSON.stringify(points) + ';';
```

Fiddle demo

HTML canvas art, generate coordinates data from sketch

Solution

Problem