<script src="//code.jquery.com/jquery-1.9.1.min.js"></script><a href="#" id="add_pts">add new point</a><br />
<canvas id="canvas" width=600 height=600></canvas>
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid green;
background: #ccc;
//height: 95px;
//line-height: 95px;
text-align: center;
transform: perspective(500px) rotateX(70deg);
transform: perspective(500px) rotateX(70deg);
//width: 95px;
margin-left:400px;
}
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cw=canvas.width;
var ch=canvas.height;
var fov = 250;
var pts = [[{"X":"52.654519585231995","Y":"8.281888961791992"},{"X":"52.692407627195315","Y":"8.282232284545898"},{"X":"52.69407228181244","Y":"8.284463882446289"},{"X":"52.6954247669531","Y":"8.28669548034668"},{"X":"52.695320731122195","Y":"8.290987014770508"},{"X":"52.69417632061854","Y":"8.293905258178711"},{"X":"52.69230358417426","Y":"8.295278549194336"},{"X":"52.690222671685994","Y":"8.295621871948242"},{"X":"52.68741328250608","Y":"8.296823501586914"},{"X":"52.68293869694087","Y":"8.29716682434082"},{"X":"52.67450858118072","Y":"8.296651840209961"},{"X":"52.66399467614557","Y":"8.296480178833008"},{"X":"52.6612877168865","Y":"8.298368453979492"},{"X":"52.660142414421955","Y":"8.300600051879883"},{"X":"52.65930944832587","Y":"8.302316665649414"},{"X":"52.658580589970896","Y":"8.305234909057617"},{"X":"52.65826821838419","Y":"8.307981491088867"},{"X":"52.65837234249445","Y":"8.309869766235352"},{"X":"52.65910120432169","Y":"8.311929702758789"},{"X":"52.66191241467305","Y":"8.314332962036133"},{"X":"52.66357823178733","Y":"8.314332962036133"},{"X":"52.66513987767027","Y":"8.31416130065918"},{"X":"52.66743019069476","Y":"8.312616348266602"},{"X":"52.66951218928502","Y":"8.310213088989258"},{"X":"52.67409223701214","Y":"8.308496475219727"},{"X":"52.68335495679925","Y":"8.317766189575195"},{"X":"52.68595649102906","Y":"8.315019607543945"},{"X":"52.687205172413364","Y":"8.313989639282227"},{"X":"52.69147123108014","Y":"8.31416130065918"},{"X":"52.69292783858143","Y":"8.324460983276367"},{"X":"52.688349765649804","Y":"8.331842422485352"},{"X":"52.67898403041112","Y":"8.341283798217773"},{"X":"52.67482083670333","Y":"8.339567184448242"},{"X":"52.672947270089935","Y":"8.340425491333008"},{"X":"52.670969529275744","Y":"8.34111213684082"},{"X":"52.669720383688166","Y":"8.341455459594727"},{"X":"52.66555630714824","Y":"8.340768814086914"},{"X":"52.66368234324891","Y":"8.343172073364258"},{"X":"52.66076712857737","Y":"8.364629745483398"},{"X":"52.66951218928502","Y":"8.365659713745117"},{"X":"52.67305135923188","Y":"8.36308479309082"},{"X":"52.68127361783348","Y":"8.356904983520508"},{"X":"52.68460371257021","Y":"8.356561660766602"},{"X":"52.69074290910587","Y":"8.360681533813477"},{"X":"52.69136718582764","Y":"8.363428115844727"},{"X":"52.69188740961072","Y":"8.368234634399414"},{"X":"52.6912631403272","Y":"8.373041152954102"},{"X":"52.68949432888451","Y":"8.379220962524414"},{"X":"52.687621391607","Y":"8.382654190063477"},{"X":"52.684915895933905","Y":"8.386430740356445"},{"X":"52.6823142997145","Y":"8.389863967895508"},{"X":"52.679712548518395","Y":"8.393640518188477"},{"X":"52.67409223701214","Y":"8.398447036743164"},{"X":"52.670657246226746","Y":"8.400163650512695"},{"X":"52.66545220015074","Y":"8.398962020874023"},{"X":"52.66295355780973","Y":"8.393125534057617"},{"X":"52.66441111653572","Y":"8.386945724487305"},{"X":"52.667117882350325","Y":"8.384027481079102"},{"X":"52.66888760012375","Y":"8.38231086730957"},{"X":"52.68189802993765","Y":"8.373041152954102"}]];
mimicSvg(pts,1);
function mimicSvg(pts,n){
// make caps & joins round
//ctx.lineCap='square';
ctx.lineJoin='round';
// draw the outside line with red shadow
ctx.shadowColor='red';
ctx.shadowBlur='5';
ctx.lineWidth='60';
//ctx.scale(9,9);
//ctx.rotate((Math.PI/180)*25);
//ctx.translate(52.67528921580262,8.373513221740723);
// draw multiple times to darken shadow
drawPolyline(pts);
drawPolyline(pts);
drawPolyline(pts);
// stop shadowing
ctx.shadowColor='transparent';
// refill the outside line with pink
ctx.strokeStyle='yellowgreen';
drawPolyline(pts);
// draw the inside line
ctx.lineWidth=2;
ctx.strokeStyle='blue';
drawPolyline(pts);
}
function drawPolyline(pts){
ctx.beginPath();
function endProp( mathFunc, array, property ) {
return Math[ mathFunc ].apply(array, array.map(function ( item ) {
return item[ property ];
}));
}
var maxY = endProp( "max", pts[0], "Y" ), // 8.389
minY = endProp( "min", pts[0], "Y" );
var maxX = endProp( "max", pts[0], "X" ), // 8.389
minX = endProp( "min", pts[0], "X" );
for(var i=1;i<pts[0].length;i++){
var a = (((pts[0][i].X - minX) * (600 - 0)) / (maxX - minX)) + 0;
var b = (((pts[0][i].Y - minY) * (600 - 0)) / (maxY - minY)) + 0;
ctx.lineTo(a,b);
}
ctx.stroke();
}
function randomPoint(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
document.getElementById('add_pts').addEventListener('click', function(e) {
c=Math.random();
var i = 52.6+c;
var n = 8.3+c;
pts.push({X:i,Y:n});
ctx.clearRect(0, 0, canvas.width, canvas.height);
mimicSvg(pts,1);
e.preventDefault();
return false;
});
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |