Thanks Phill. It wasnt that hard actually - here's the procedure.
1. Download Lemur logo as a .png image from Lemur facebook page
2. Resize .png image to exactly 1000 x 1000 pixels
3. make it a black and white image - black being the Lemur head.
4. GOOGLE - image to svg convertor
5. Open the .svg file with a text editor
6. GOOGLE - svg to html5 canvas
7. Copy paste the .svg text into it, and you get the resulting html5 canvas code.
Code: Select all
var draw = function(ctx) {
ctx.save();
ctx.translate(0,0);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(1000,0);
ctx.lineTo(1000,1000);
ctx.lineTo(0,1000);
ctx.closePath();
ctx.clip();
ctx.translate(0,0);
ctx.translate(0,0);
ctx.scale(1,1);
ctx.translate(0,0);
ctx.strokeStyle = 'rgba(0,0,0,0)';
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.miterLimit = 4;
ctx.save();
ctx.save();
ctx.beginPath();
ctx.moveTo(832,224);
ctx.bezierCurveTo(841.085,257.863,837.415,292.995,831,323);
ctx.bezierCurveTo(824.345,354.13,813.744,377.845,799,401);
ctx.bezierCurveTo(769.68,447.046,764.749,509.211,740,562);
ctx.bezierCurveTo(716.444,612.244,679.766,643.449,641,683);
ctx.bezierCurveTo(623.948,700.397,605.931,721.25,589,741);
ctx.bezierCurveTo(571.437,761.488,553.675,783.36,532,793);
ctx.bezierCurveTo(515.016,800.553,486.612,801.199,468,793);
ctx.bezierCurveTo(433.751,777.912,410.04200000000003,738.344,387,712);
ctx.bezierCurveTo(334.577,652.065,274.065,612.599,246,529);
ctx.bezierCurveTo(232.074,487.519,226.695,446.219,206,408);
ctx.bezierCurveTo(199.625,396.227,190.32,385.605,184,372);
ctx.bezierCurveTo(167.518,336.517,157.412,275.951,168,224);
ctx.bezierCurveTo(193.859,231.245,217.799,237.299,243,238);
ctx.bezierCurveTo(269.466,238.736,294.904,233.747,321,228);
ctx.bezierCurveTo(371.355,216.91,422.437,203.484,475,201);
ctx.bezierCurveTo(541.148,197.874,599.821,209.427,657,223);
ctx.bezierCurveTo(711.842,236.019,775.651,247.178,832,224);
ctx.closePath();
ctx.moveTo(297,506);
ctx.bezierCurveTo(305.62,558.211,329.255,607.729,371,627);
ctx.bezierCurveTo(418.094,648.74,461.943,610.765,447,563);
ctx.bezierCurveTo(440.819,543.242,418.985,516.853,399,509);
ctx.bezierCurveTo(370.194,497.682,328.15,514.303,298,503);
ctx.bezierCurveTo(297.39,503.057,296.816,503.149,297,504);
ctx.bezierCurveTo(295.991,504.012,295.742,505.753,297,506);
ctx.closePath();
ctx.moveTo(598,511);
ctx.bezierCurveTo(561.047,528.89,531.648,592.255,568,623);
ctx.bezierCurveTo(580.859,633.876,607.759,635.979,627,628);
ctx.bezierCurveTo(671.641,609.489,694.1610000000001,559.625,704,504);
ctx.bezierCurveTo(703.943,503.39,703.851,502.816,703,503);
ctx.bezierCurveTo(672.872,513.749,626.063,497.415,598,511);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
};
8. USE the coordinates of the bezier curves as noted in the above code in a canvas object in Lemur. Here's the trick though:
Since the "coordinates" originated from a 1000 x 1000 pixels image, then to find "percentage" of width all you have to do is divide them by 1000.
9. Apply some rounding as there is really NO practical need for so many decimal digits.
10. Enjoy!