5.13 knife

by Alon Rotem

HTML

<canvas id='canvas' width='1707' height='2508'></canvas>

JavaScript

/*
Schematic canvasize the picture of the knife
=============================================
1. Outline the shpae and cut it
2. Move to Gimp, select the shape
3. Menu: Select -> To Path
4. Fine-tune, add/remove anchor points
    (Select the Path tool. Ro remove a point: ctrl+shift+click)
5. In the Paths section (tab next to layers), right-click -> Export path -> to .svg
6. Open the .svg in InkScape
7. Save has: HTML5 Canvas
8. Fine-tune the script each point: offset.x + scale * coordinate.x (or y)

----------------------------------------- 
Notepad++ Replace (Regex)
ctx.moveTo\(([^\,]*)\s*\,\s*([^\)]*) -> ctx.moveTo\(\(offset.x + scale * $1\), \(offset.y + scale * $2\)

ctx.lineTo\(([^\,]*)\s*\,\s*([^\)]*) -> ctx.lineTo\(\(offset.x + scale * $1\), \(offset.y + scale * $2\)

ctx.bezierCurveTo\(([^\,]*)\s*\,\s*([^\,]*)\s*\,\s*([^\,]*)\s*\,\s*([^\)]*)\s*\,\s*([^\)]*)\s*\,\s*([^\)]*) -> ctx.bezierCurveTo\(\(offset.x + scale * $1\), \(offset.y + scale * $2\), \(offset.x + scale * $3\), \(offset.y + scale * $4\), \(offset.x + scale * $5\), \(offset.y + scale * $6\)
-----------------------------------------

9 Find kep points to anchor babies to

TODO: How to position babies along curves?
*/

var ctx = document.getElementById("canvas").getContext("2d");

var offset = {
    x: 200,
    y: 0
};

var scale = .1;
var linewidth = 2;
var showPoints = false;
var reduce_width_by = 0;

// #Full merged (min points)
ctx.beginPath();
ctx.strokeStyle = 'rgb(0, 0, 0)';
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.font = "25px Arial";
ctx.lineWidth = linewidth;
	
// #Inner arrow
ctx.beginPath();
ctx.strokeStyle = 'rgb(255, 0, 0)';
ctx.lineWidth = linewidth;
ctx.moveTo((offset.x + scale * 1076.060000), (offset.y + scale * 1495.570000));
ctx.lineTo((offset.x + scale * 1076.980000), (offset.y + scale * 1620.480000));
ctx.lineTo((offset.x + scale * 1444.840000), (offset.y + scale * 1620.560000));
ctx.lineTo((offset.x + scale * 1443.340000),...