<!doctype html> <html> <head> <title>strong tag</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script type="text/javascript" src="jquery-2.0.3.js"></script> <script type="text/javascript"> var margin, s1, s2, s3, hook_separation, h1, h2, h3, h4, hook_overlap, hook_height, stroke_width, staple_rise, staple_offset, staple_width, hook_bite; var canvas, ctx; var w = this; $(document).ready(function() { canvas = $('canvas')[0]; ctx = canvas.getContext("2d"); $('input').each(function() { w[$(this).attr('name')] = parseFloat($(this).val());}); $('input').on('change', function() { w[$(this).attr('name')] = parseFloat($(this).val()); redraw(); }); redraw(); }); function redraw() { h1 = margin; s1 = margin; staple_rise = staple_offset; staple_leg_height = staple_offset; interior_margin = margin; ctx.fillStyle = '#000' ctx.fillRect(0, 0, canvas.width, canvas.height); style(); ctx.save(); draw_on(ctx); ctx.translate(0, canvas.height); ctx.scale(1, -1); draw_on(ctx); ctx.translate(canvas.width, 0); ctx.scale(-1, 1); draw_on(ctx); ctx.translate(0, canvas.height); ctx.scale(1, -1); draw_on(ctx); ctx.restore(); } function style() { var foreground = 'white'; ctx.fillStyle = foreground; ctx.strokeStyle = foreground; ctx.lineJoin = "miter"; ctx.lineCap = "square"; ctx.lineWidth = stroke_width; } function draw_on(context) { // t var p1 = new Path2D(); p1.moveTo(margin, margin); p1.lineTo(margin, canvas.height / 2); p1.lineTo(margin + s1, canvas.height / 2); ctx.stroke(p1) // arms var p2 = new Path2D(); p2.moveTo(margin + s1, (canvas.height / 2) - h1); p2.lineTo(margin + s1, margin); p2.lineTo((canvas.width / 2) - hook_separation, margin); p2.lineTo((canvas.width / 2) - hook_separation, margin + hook_height); p2.lineTo((canvas.width / 2) - staple_width - hook_bite, margin + hook_height); ctx.stroke(p2); // staple var p3 = new Path2D(); p3.moveTo((canvas.width / 2) - hook_separation + hook_bite, margin + staple_leg_height); p3.lineTo((canvas.width / 2) - staple_width, margin + staple_leg_height); p3.lineTo((canvas.width / 2) - staple_width, margin + hook_height + staple_offset); p3.lineTo((canvas.width / 2), margin + hook_height + staple_rise); ctx.stroke(p3); //interior var big_rect_x1 = margin + s1 + interior_margin; var big_rect_y1 = margin + interior_margin; var big_rect_x2 = (canvas.width / 2) - staple_width - interior_margin; var big_rect_y2 = (canvas.height / 2) + 1; ctx.fillRect(big_rect_x1, big_rect_y1, big_rect_x2 - big_rect_x1, big_rect_y2 - big_rect_y1); var small_rect_x1 = margin + s1 + interior_margin; var small_rect_y1 = margin + hook_height + staple_rise + interior_margin; var small_rect_x2 = (canvas.width / 2) + 1; var small_rect_y2 = (canvas.height / 2) + 1; ctx.fillRect(small_rect_x1, small_rect_y1, small_rect_x2 - small_rect_x1, small_rect_y2 - small_rect_y1); } </script> <style> canvas { width: 600px; height: 250px; border: 1px solid black; display: block; } </style> </head> <body> <canvas width="600" height="250"></canvas> <p><label for="stroke_width">channel width: </label><input type="range" name="stroke_width" min="0" max="20" step="2" value="8" /></p> <p><label for="margin">margin: </label><input type="range" name="margin" min="10" max="40" value="20"/></p> <p><label for="hook_separation">hook separation: </label><input type="range" name="hook_separation" min="5" max="40" value="16"/></p> <p><label for="hook_height">hooks height: </label><input type="range" name="hook_height" min="20" max="60" value="37"/></p> <p><label for="staple_width">staple width: </label><input type="range" name="staple_width" min="0" max="70" value="50"/></p> <p><label for="staple_offset">staple offset: </label><input type="range" name="staple_offset" min="5" max="60" value="17"/></p> <p><label for="hook_bite">hook bite: </label><input type="range" name="hook_bite" min="-40" max="-5" value="-15"/></p> </body> </html>