(function() { var onDOMContentLoaded = function() { var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var cw = canvas.width; var ch = canvas.height; var styles = { stroke : 'rgba(0, 0, 0, 1.0)', fill : 'rgba(0, 0, 0, 1.0)', width : document.getElementById('range-width').valueAsNumber }; var strokeTriangle = function() { var padding = 25; context.beginPath(); context.moveTo((parseInt((cw - 2 * padding) / 2) + padding), padding); context.lineTo((cw - padding), (ch - padding)); context.lineTo(padding, (ch - padding)); context.closePath(); if (styles.stroke !== 'none') { context.strokeStyle = styles.stroke; context.lineWidth = styles.width; context.stroke(); } if (styles.fill !== 'none') { context.fillStyle = styles.fill; context.fill(); } }; var strokeRect = function() { var padding = 25; context.beginPath(); context.moveTo(padding, padding); context.lineTo((cw - padding), padding); context.lineTo((cw - padding), (ch - padding)); context.lineTo(padding, (ch - padding)); context.closePath(); if (styles.stroke !== 'none') { context.strokeStyle = styles.stroke; context.lineWidth = styles.width; context.stroke(); } if (styles.fill !== 'none') { context.fillStyle = styles.fill; context.fill(); } }; var drawX = function() { context.beginPath(); context.moveTo(0, 0); context.lineTo(cw, ch); context.moveTo(cw, 0); context.lineTo(0, ch); if (styles.stroke !== 'none') { context.strokeStyle = styles.stroke; context.lineWidth = styles.width; context.stroke(); } }; // Initial path strokeTriangle(); document.getElementById('form-path-type').addEventListener('change', function() { for (var i = 0, len = this.elements['radio-path-type'].length; i < len; i++) { if (this.elements['radio-path-type'][i].checked) { switch (this.elements['radio-path-type'][i].value) { case 'triangle' : strokeTriangle(); break; case 'rect' : strokeRect(); break; case 'x' : drawX(); break; case 'clear' : context.clearRect(0, 0, cw, ch); break; default : break; } break; } } }, false); document.getElementById('form-stroke-color').addEventListener('change', function() { for (var i = 0, len = this.elements['radio-stroke-color'].length; i < len; i++) { if (this.elements['radio-stroke-color'][i].checked) { styles.stroke = this.elements['radio-stroke-color'][i].value; break; } } }, false); document.getElementById('form-fill-color').addEventListener('change', function() { for (var i = 0, len = this.elements['radio-fill-color'].length; i < len; i++) { if (this.elements['radio-fill-color'][i].checked) { styles.fill = this.elements['radio-fill-color'][i].value; break; } } }, false); document.getElementById('range-width').addEventListener('input', function() { styles.width = this.valueAsNumber; document.getElementById('output-width').textContent = this.value; }, false); }; if ((document.readyState === 'interactive') || (document.readyState === 'complete')) { onDOMContentLoaded(); } else { document.addEventListener('DOMContentLoaded', onDOMContentLoaded, true); } })();
function EventWrapper(){ } (function(){ var click = ''; var start = ''; var move = ''; var end = ''; // Touch Panel ? if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) { click = 'click'; start = 'touchstart'; move = 'touchmove'; end = 'touchend'; } else { click = 'click'; start = 'mousedown'; move = 'mousemove'; end = 'mouseup'; } EventWrapper.CLICK = click; EventWrapper.START = start; EventWrapper.MOVE = move; EventWrapper.END = end; })();