/*
* Copyright (C) 2012 David Geary. This code is from the book
* Core HTML5 Canvas, published by Prentice-Hall in 2012.
*
* License:
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation files
* (the "Software"), to deal in the Software without restriction,
* including without limitation the rights to use, copy, modify, merge,
* publish, distribute, sublicense, and/or sell copies of the Software,
* and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* The Software may not be used to create training material of any sort,
* including courses, books, instructional videos, presentations, etc.
* without the express written consent of David Geary.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
var iconCanvas = document.getElementById('iconCanvas'),
drawingCanvas = document.getElementById('drawingCanvas'),
drawingContext = drawingCanvas.getContext('2d'),
backgroundContext = document.createElement('canvas').getContext('2d'),
iconContext = iconCanvas.getContext('2d'),
strokeStyleSelect = document.getElementById('strokeStyleSelect'),
fillStyleSelect = document.getElementById('fillStyleSelect'),
lineWidthSelect = document.getElementById('lineWidthSelect'),
eraseAllButton = document.getElementById('eraseAllButton'),
snapshotButton = document.getElementById('snapshotButton'),
controls = document.getElementById('controls'),
curveInstructions = document.getElementById('curveInstructions'),
curveInstructionsOkayButton = document.getElementById('curveInstructionsOkayButton'),
curveInstructionsNoMoreButton = document.getElementById('curveInstructionsNoMoreButton'),
showCurveInstructions = true,
drawingSurfaceImageData,
rubberbandW,
rubberbandH,
rubberbandUlhc = {},
dragging = false,
mousedown = {},
lastRect = {},
lastX, lastY,
controlPoint = {},
editingCurve = false,
draggingControlPoint = false,
curveStart = {},
curveEnd = {},
doFill = false,
selectedRect = null,
selectedFunction,
editingText = false,
currentText,
CONTROL_POINT_RADIUS = 20,
CONTROL_POINT_FILL_STYLE = 'rgba(255,255,0,0.5)',
CONTROL_POINT_STROKE_STYLE = 'rgba(0, 0, 255, 0.8)',
RUBBERBAND_LINE_WIDTH = 1,
RUBBERBAND_STROKE_STYLE = 'green',
GRID_HORIZONTAL_SPACING = 10,
GRID_VERTICAL_SPACING = 10,
GRID_LINE_COLOR = 'rgb(0, 0, 200)',
ERASER_ICON_GRID_COLOR = 'rgb(0, 0, 200)',
ERASER_ICON_CIRCLE_COLOR = 'rgba(100, 140, 200, 0.5)',
ERASER_ICON_RADIUS = 20,
SLINKY_LINE_WIDTH = 1,
SLINKY_SHADOW_STYLE = 'rgba(0,0,0,0.2)',
SLINKY_SHADOW_OFFSET = -5,
SLINKY_SHADOW_BLUR = 20,
SLINKY_RADIUS = 60,
ERASER_LINE_WIDTH = 1,
ERASER_SHADOW_STYLE = 'blue',
ERASER_STROKE_STYLE = 'rgba(0,0,255,0.6)',
ERASER_SHADOW_OFFSET = -5,
ERASER_SHADOW_BLUR = 20,
ERASER_RADIUS = 40,
SHADOW_COLOR = 'rgba(0,0,0,0.7)',
ICON_BACKGROUND_STYLE = '#eeeeee',
ICON_BORDER_STROKE_STYLE = 'rgba(100, 140, 230, 0.5)',
ICON_STROKE_STYLE = 'rgb(100, 140, 230)',
ICON_FILL_STYLE = '#dddddd',
TEXT_ICON_FILL_STYLE = 'rgba(100, 140, 230, 0.5)',
TEXT_ICON_TEXT = 'T',
CIRCLE_ICON_RADIUS = 20,
ICON_RECTANGLES = [
{ x: 13.5, y: 18.5, w: 48, h: 48 },
{ x: 13.5, y: 78.5, w: 48, h: 48 },
{ x: 13.5, y: 138.5, w: 48, h: 48 },
{ x: 13.5, y: 198.5, w: 48, h: 48 },
{ x: 13.5, y: 258.5, w: 48, h: 48 },
{ x: 13.5, y: 318.5, w: 48, h: 48 },
{ x: 13.5, y: 378.5, w: 48, h: 48 },
{ x: 13.5, y: 438.5, w: 48, h: 48 },
{ x: 13.5, y: 508.5, w: 48, h: 48 }
],
LINE_ICON = 0,
RECTANGLE_ICON = 1,
CIRCLE_ICON = 2,
OPEN_PATH_ICON = 3,
CLOSED_PATH_ICON = 4,
CURVE_ICON = 5,
TEXT_ICON = 6,
SLINKY_ICON = 7,
ERASER_ICON = 8,
keyboard = new COREHTML5.Keyboard();
// Grid..........................................................
function drawGrid(context, color, stepx, stepy) {
context.save()
context.strokeStyle = color;
context.fillStyle = '#ffffff';
context.lineWidth = 0.5;
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.globalAlpha = 0.1;
context.beginPath();
for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
}
context.stroke();
context.beginPath();
for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
}
context.stroke();
context.restore();
}
// Icons.........................................................
function drawLineIcon(rect) {
iconContext.beginPath();
iconContext.moveTo(rect.x + 5, rect.y + 5);
iconContext.lineTo(rect.x + rect.w - 5, rect.y + rect.h - 5);
iconContext.stroke();
}
function drawRectIcon(rect) {
fillIconLowerRight(rect);
iconContext.strokeRect(rect.x + 5, rect.y + 5,
rect.w - 10, rect.h - 10);
}
function drawCircleIcon(rect) {
var startAngle = 3*Math.PI/4,
endAngle = 7*Math.PI/4,
center = {x: rect.x + rect.w/2, y: rect.y + rect.h/2 };
fillIconLowerRight(rect);
iconContext.beginPath();
iconContext.arc(rect.x + rect.w/2, rect.y + rect.h/2,
CIRCLE_ICON_RADIUS, 0, Math.PI*2, false);
iconContext.stroke();
}
function drawOpenPathIcon(rect) {
iconContext.beginPath();
drawOpenPathIconLines(rect);
iconContext.stroke();
}
function drawClosedPathIcon(rect) {
fillIconLowerRight(rect);
iconContext.beginPath();
drawOpenPathIconLines(rect);
iconContext.closePath();
iconContext.stroke();
}
function drawCurveIcon(rect) {
fillIconLowerRight(rect);
iconContext.beginPath();
iconContext.beginPath();
iconContext.moveTo(rect.x + rect.w - 10, rect.y + 5);
iconContext.quadraticCurveTo(rect.x - 10, rect.y,
rect.x + rect.w - 10,
rect.y + rect.h - 5);
iconContext.stroke();
}
function drawTextIcon(rect) {
var text = TEXT_ICON_TEXT;
fillIconLowerRight(rect);
iconContext.fillStyle = TEXT_ICON_FILL_STYLE;
iconContext.fillText(text, rect.x + rect.w/2,
rect.y + rect.h/2 + 5);
iconContext.strokeText(text, rect.x + rect.w/2,
rect.y + rect.h/2 + 5);
}
function drawSlinkyIcon(rect) {
var x, y;
fillIconLowerRight(rect);
iconContext.save();
iconContext.strokeStyle = 'rgba(100, 140, 230, 0.6)';
for (var i=-2; i < rect.w/3 + 2; i+=1.5) {
if (i < rect.w/6) x = rect.x + rect.w/3 + i + rect.w/8;
else x = rect.x + rect.w/3 + (rect.w/3 - i) + rect.w/8;
y = rect.y + rect.w/3 + i;
iconContext.beginPath();
iconContext.arc(x, y, 12, 0, Math.PI*2, false);
iconContext.stroke();
}
iconContext.restore();
}
function drawEraserIcon(rect) {
var rect = ICON_RECTANGLES[ERASER_ICON];
iconContext.save();
iconContext.beginPath();
iconContext.arc(rect.x + rect.w/2,
rect.y + rect.h/2,
ERASER_ICON_RADIUS, 0, Math.PI*2, false);
iconContext.strokeStyle = ERASER_ICON_CIRCLE_COLOR;
iconContext.stroke();
iconContext.clip(); // restrict drawGrid() to the circle
drawGrid(iconContext, ERASER_ICON_GRID_COLOR, 5, 5);
iconContext.restore();
}
function drawIcon(rect) {
iconContext.save();
iconContext.strokeStyle = ICON_BORDER_STROKE_STYLE;
iconContext.strokeRect(rect.x, rect.y, rect.w, rect.h);
iconContext.strokeStyle = ICON_STROKE_STYLE;
if (rect.y === ICON_RECTANGLES[LINE_ICON].y) drawLineIcon(rect);
else if (rect.y === ICON_RECTANGLES[RECTANGLE_ICON].y) drawRectIcon(rect);
else if (rect.y === ICON_RECTANGLES[CIRCLE_ICON].y) drawCircleIcon(rect);
else if (rect.y === ICON_RECTANGLES[OPEN_PATH_ICON].y) drawOpenPathIcon(rect);
else if (rect.y === ICON_RECTANGLES[CLOSED_PATH_ICON].y) drawClosedPathIcon(rect, 20);
else if (rect.y === ICON_RECTANGLES[TEXT_ICON].y) drawTextIcon(rect);
else if (rect.y === ICON_RECTANGLES[CURVE_ICON].y) drawCurveIcon(rect);
else if (rect.y === ICON_RECTANGLES[ERASER_ICON].y) drawEraserIcon(rect);
else if (rect.y === ICON_RECTANGLES[SLINKY_ICON].y) drawSlinkyIcon(rect);
iconContext.restore();
}
function drawIcons() {
iconContext.clearRect(0,0, iconCanvas.width,
iconCanvas.height);
ICON_RECTANGLES.forEach(function(rect) {
iconContext.save();
if (selectedRect === rect) setSelectedIconShadow();
else setIconShadow();
iconContext.fillStyle = ICON_BACKGROUND_STYLE;
iconContext.fillRect(rect.x, rect.y, rect.w, rect.h);
iconContext.restore();
drawIcon(rect);
});
}
function drawOpenPathIconLines(rect) {
iconContext.lineTo(rect.x + 13, rect.y + 19);
iconContext.lineTo(rect.x + 15, rect.y + 17);
iconContext.lineTo(rect.x + 25, rect.y + 12);
iconContext.lineTo(rect.x + 35, rect.y + 13);
iconContext.lineTo(rect.x + 38, rect.y + 15);
iconContext.lineTo(rect.x + 40, rect.y + 17);
iconContext.lineTo(rect.x + 39, rect.y + 23);
iconContext.lineTo(rect.x + 36, rect.y + 25);
iconContext.lineTo(rect.x + 32, rect.y + 27);
iconContext.lineTo(rect.x + 28, rect.y + 29);
iconContext.lineTo(rect.x + 26, rect.y + 31);
iconContext.lineTo(rect.x + 24, rect.y + 33);
iconContext.lineTo(rect.x + 22, rect.y + 35);
iconContext.lineTo(rect.x + 20, rect.y + 37);
iconContext.lineTo(rect.x + 18, rect.y + 39);
iconContext.lineTo(rect.x + 16, rect.y + 39);
iconContext.lineTo(rect.x + 13, rect.y + 36);
iconContext.lineTo(rect.x + 11, rect.y + 34);
}
function fillIconLowerRight(rect) {
iconContext.beginPath();
iconContext.moveTo(rect.x + rect.w, rect.y);
iconContext.lineTo(rect.x + rect.w, rect.y + rect.h);
iconContext.lineTo(rect.x, rect.y + rect.h);
iconContext.closePath();
iconContext.fill();
}
function isPointInIconLowerRight(rect, x, y) {
iconContext.beginPath();
iconContext.moveTo(rect.x + rect.w, rect.y);
iconContext.lineTo(rect.x + rect.w, rect.y + rect.h);
iconContext.lineTo(rect.x, rect.y + rect.h);
return iconContext.isPointInPath(x, y);
}
function getIconFunction(rect, loc) {
var action;
if (rect.y === ICON_RECTANGLES[LINE_ICON].y) action = 'line';
else if (rect.y === ICON_RECTANGLES[RECTANGLE_ICON].y) action = 'rectangle';
else if (rect.y === ICON_RECTANGLES[CIRCLE_ICON].y) action = 'circle';
else if (rect.y === ICON_RECTANGLES[OPEN_PATH_ICON].y) action = 'path';
else if (rect.y === ICON_RECTANGLES[CLOSED_PATH_ICON].y) action = 'pathClosed';
else if (rect.y === ICON_RECTANGLES[CURVE_ICON].y) action = 'curve';
else if (rect.y === ICON_RECTANGLES[TEXT_ICON].y) action = 'text';
else if (rect.y === ICON_RECTANGLES[SLINKY_ICON].y) action = 'slinky';
else if (rect.y === ICON_RECTANGLES[ERASER_ICON].y) action = 'erase';
if (action === 'rectangle' || action === 'circle' ||
action === 'pathClosed' || action === 'text' ||
action === 'curve' || action === 'slinky') {
doFill = isPointInIconLowerRight(rect, loc.x, loc.y);
}
return action;
}
function setIconShadow() {
iconContext.shadowColor = SHADOW_COLOR;
iconContext.shadowOffsetX = 1;
iconContext.shadowOffsetY = 1;
iconContext.shadowBlur = 2;
}
function setSelectedIconShadow() {
iconContext.shadowColor = SHADOW_COLOR;
iconContext.shadowOffsetX = 4;
iconContext.shadowOffsetY = 4;
iconContext.shadowBlur = 5;
}
function selectIcon(rect) {
selectedRect = rect;
drawIcons();
}
// Saving/Restoring the drawing surface..........................
function saveDrawingSurface() {
drawingSurfaceImageData = drawingContext.getImageData(0, 0,
drawingCanvas.width,
drawingCanvas.height);
}
function restoreDrawingSurface() {
drawingContext.putImageData(drawingSurfaceImageData, 0, 0);
}
// Rubberbands...................................................
function updateRubberbandRectangle(loc) {
rubberbandW = Math.abs(loc.x - mousedown.x);
rubberbandH = Math.abs(loc.y - mousedown.y);
if (loc.x > mousedown.x) rubberbandUlhc.x = mousedown.x;
else rubberbandUlhc.x = loc.x;
if (loc.y > mousedown.y) rubberbandUlhc.y = mousedown.y;
else rubberbandUlhc.y = loc.y;
}
function drawRubberbandRectangle() {
drawingContext.strokeRect(rubberbandUlhc.x,
rubberbandUlhc.y,
rubberbandW, rubberbandH);
}
function drawRubberbandLine(loc) {
drawingContext.beginPath();
drawingContext.moveTo(mousedown.x, mousedown.y);
drawingContext.lineTo(loc.x, loc.y);
drawingContext.stroke();
}
function drawRubberbandCircle(loc) {
var angle = Math.atan(rubberbandH/rubberbandW);
var radius = rubberbandH / Math.sin(angle);
if (mousedown.y === loc.y) {
radius = Math.abs(loc.x - mousedown.x);
}
drawingContext.beginPath();
drawingContext.arc(mousedown.x, mousedown.y, radius, 0, Math.PI*2, false);
drawingContext.stroke();
}
function drawRubberband(loc) {
drawingContext.save();
drawingContext.strokeStyle = RUBBERBAND_STROKE_STYLE;
drawingContext.lineWidth = RUBBERBAND_LINE_WIDTH;
if (selectedFunction === 'rectangle') {
drawRubberbandRectangle();
}
else if (selectedFunction === 'line' ||
selectedFunction === 'curve') {
drawRubberbandLine(loc);
}
else if (selectedFunction === 'circle') {
drawRubberbandCircle(loc);
}
drawingContext.restore();
}
// Eraser........................................................
function setPathForEraser() {
drawingContext.beginPath();
drawingContext.moveTo(lastX, lastY);
drawingContext.arc(lastX, lastY,
ERASER_RADIUS + ERASER_LINE_WIDTH,
0, Math.PI*2, false);
}
function setSlinkyAttributes() {
drawingContext.lineWidth = lineWidthSelect.value;
drawingContext.shadowColor = strokeStyleSelect.value;
drawingContext.shadowOffsetX = SLINKY_SHADOW_OFFSET;
drawingContext.shadowOffsetY = SLINKY_SHADOW_OFFSET;
drawingContext.shadowBlur = SLINKY_SHADOW_BLUR;
drawingContext.strokeStyle = strokeStyleSelect.value;
}
function setEraserAttributes() {
drawingContext.lineWidth = ERASER_LINE_WIDTH;
drawingContext.shadowColor = ERASER_SHADOW_STYLE;
drawingContext.shadowOffsetX = ERASER_SHADOW_OFFSET;
drawingContext.shadowOffsetY = ERASER_SHADOW_OFFSET;
drawingContext.shadowBlur = ERASER_SHADOW_BLUR;
drawingContext.strokeStyle = ERASER_STROKE_STYLE;
}
function eraseLast() {
var x = lastX - ERASER_RADIUS-ERASER_LINE_WIDTH,
y = lastY - ERASER_RADIUS-ERASER_LINE_WIDTH,
w = ERASER_RADIUS*2+ERASER_LINE_WIDTH*2,
h = w,
cw = drawingContext.canvas.width,
ch = drawingContext.canvas.height;
drawingContext.save();
setPathForEraser();
drawingContext.clip();
if (x + w > cw) w = cw - x;
if (y + h > ch) h = ch - y;
if (x < 0) { x = 0; }
if (y < 0) { y = 0; }
drawingContext.drawImage(
backgroundContext.canvas, x, y, w, h, x, y, w, h);
drawingContext.restore();
}
function drawEraser(loc) {
drawingContext.save();
setEraserAttributes();
drawingContext.beginPath();
drawingContext.arc(loc.x, loc.y, ERASER_RADIUS,
0, Math.PI*2, false);
drawingContext.clip();
drawingContext.stroke();
drawingContext.restore();
}
function drawSlinky(loc) {
drawingContext.save();
setSlinkyAttributes();
drawingContext.beginPath();
drawingContext.arc(loc.x, loc.y, ERASER_RADIUS,
0, Math.PI*2, false);
drawingContext.clip();
drawingContext.strokeStyle = strokeStyleSelect.value;
drawingContext.stroke();
if (doFill) {
drawingContext.shadowColor = undefined;
drawingContext.shadowOffsetX = 0;
drawingContext.globalAlpha = 0.2;
drawingContext.fill();
}
drawingContext.restore();
}
// Finish drawing lines, circles, and rectangles.................
function finishDrawingLine(loc) {
drawingContext.beginPath();
drawingContext.moveTo(mousedown.x, mousedown.y);
drawingContext.lineTo(loc.x, loc.y);
drawingContext.stroke();
}
function finishDrawingCircle(loc) {
var angle = Math.atan(rubberbandH/rubberbandW),
radius = rubberbandH / Math.sin(angle);
if (mousedown.y === loc.y) {
radius = Math.abs(loc.x - mousedown.x);
}
drawingContext.beginPath();
drawingContext.arc(mousedown.x, mousedown.y,
radius, 0, Math.PI*2, false);
if (doFill) {
drawingContext.fill();
}
drawingContext.stroke();
}
function finishDrawingRectangle() {
if (rubberbandW > 0 && rubberbandH > 0) {
if (doFill) {
drawingContext.fillRect(rubberbandUlhc.x,
rubberbandUlhc.y,
rubberbandW, rubberbandH)
}
drawingContext.strokeRect(rubberbandUlhc.x,
rubberbandUlhc.y,
rubberbandW, rubberbandH);
}
}
// Drawing curves................................................
function drawControlPoint() {
drawingContext.save();
drawingContext.strokeStyle = CONTROL_POINT_STROKE_STYLE;
drawingContext.fillStyle = CONTROL_POINT_FILL_STYLE;
drawingContext.lineWidth = 1.0;
drawingContext.beginPath();
drawingContext.arc(controlPoint.x, controlPoint.y,
CONTROL_POINT_RADIUS, 0, Math.PI*2, false);
drawingContext.stroke();
drawingContext.fill();
drawingContext.restore();
}
function startEditingCurve(loc) {
if (loc.x != mousedown.x || loc.y != mousedown.y) {
drawingCanvas.style.cursor = 'pointer';
curveStart.x = mousedown.x;
curveStart.y = mousedown.y;
curveEnd.x = loc.x;
curveEnd.y = loc.y;
controlPoint.x = (curveStart.x + curveEnd.x)/2;
controlPoint.y = (curveStart.y + curveEnd.y)/2;
drawControlPoint();
editingCurve = true;
if (showCurveInstructions)
curveInstructions.style.display = 'inline';
}
}
function drawCurve() {
drawingContext.beginPath();
drawingContext.moveTo(curveStart.x, curveStart.y);
drawingContext.quadraticCurveTo(controlPoint.x, controlPoint.y,
curveEnd.x, curveEnd.y);
drawingContext.stroke();
}
function finishDrawingCurve() {
drawingCanvas.style.cursor = 'crosshair';
restoreDrawingSurface();
drawCurve();
if (doFill) {
drawingContext.fill();
}
}
// Guidewires....................................................
function drawHorizontalLine (y) {
drawingContext.beginPath();
drawingContext.moveTo(0, y+0.5);
drawingContext.lineTo(drawingCanvas.width, y+0.5);
drawingContext.stroke();
}
function drawVerticalLine (x) {
drawingContext.beginPath();
drawingContext.moveTo(x+0.5, 0);
drawingContext.lineTo(x+0.5, drawingCanvas.height);
drawingContext.stroke();
}
function drawGuidewires(x, y) {
drawingContext.save();
drawingContext.strokeStyle = 'rgba(0,0,230,0.4)';
drawingContext.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
drawingContext.restore();
}
// Keyboard......................................................
function showKeyboard() {
var keyboardElement = document.getElementById('keyboard');
keyboardElement.style.height = '370px';
keyboardElement.style.top = '375px';
keyboardElement.style.border = 'thin inset rgba(0,0,0,0.5)';
keyboardElement.style.borderRadius = '20px';
keyboard.resize(1000, 368);
keyboard.translucent = mousedown.y > drawingCanvas.height/2;
keyboard.draw();
}
function hideKeyboard() {
var keyboardElement = document.getElementById('keyboard');
keyboardElement.style.height = '0px';
keyboardElement.style.top = '0px';
keyboardElement.style.border = '';
keyboardElement.style.borderRadius = '';
keyboard.resize(1000, 0);
}
// Event handling functions......................................
function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
function mouseDownOrTouchStartInControlCanvas(loc) {
if (editingText) {
editingText = false;
eraseTextCursor();
hideKeyboard();
}
else if (editingCurve) {
editingCurve = false;
restoreDrawingSurface();
}
ICON_RECTANGLES.forEach(function(rect) {
iconContext.beginPath();
iconContext.rect(rect.x, rect.y, rect.w, rect.h);
if (iconContext.isPointInPath(loc.x, loc.y)) {
selectIcon(rect, loc);
selectedFunction = getIconFunction(rect, loc);
if (selectedFunction === 'text') {
drawingCanvas.style.cursor = 'text';
}
else {
drawingCanvas.style.cursor = 'crosshair';
}
}
});
};
// Key event handlers............................................
function backspace() {
restoreDrawingSurface();
currentText = currentText.slice(0, -1);
eraseTextCursor();
};
function enter() {
finishDrawingText();
mousedown.y += drawingContext.measureText('W').width;
saveDrawingSurface();
startDrawingText();
};
function insert(key) {
currentText += key;
restoreDrawingSurface();
drawCurrentText();
drawTextCursor();
};
document.onkeydown = function (e) {
if (e.keyCode === 8) { // backspace
e.preventDefault();
backspace();
}
else if (e.keyCode === 13) { // enter
e.preventDefault();
enter();
}
}
document.onkeypress = function (e) {
var key = String.fromCharCode(e.which);
if (editingText && e.keyCode !== 8) {
e.preventDefault();
insert(key);
}
}
function eraseTextCursor() {
restoreDrawingSurface();
drawCurrentText();
}
function drawCurrentText() {
if (doFill)
drawingContext.fillText(currentText, mousedown.x, mousedown.y);
drawingContext.strokeText(currentText, mousedown.x, mousedown.y);
}
function drawTextCursor() {
var widthMetric = drawingContext.measureText(currentText),
heightMetric = drawingContext.measureText('W'),
cursorLoc = {
x: mousedown.x + widthMetric.width,
y: mousedown.y - heightMetric.width + 5
};
drawingContext.beginPath();
drawingContext.moveTo(cursorLoc.x, cursorLoc.y);
drawingContext.lineTo(cursorLoc.x, cursorLoc.y + heightMetric.width - 12);
drawingContext.stroke();
}
function startDrawingText() {
editingText = true;
currentText = '';
drawTextCursor();
showKeyboard();
}
function finishDrawingText() {
restoreDrawingSurface();
drawCurrentText();
}
function mouseDownOrTouchStartInDrawingCanvas(loc) {
dragging = true;
if (editingText) {
finishDrawingText();
}
else if (editingCurve) {
if (drawingContext.isPointInPath(loc.x, loc.y)) {
draggingControlPoint = true;
}
else {
restoreDrawingSurface();
}
editingCurve = false;
}
if (!draggingControlPoint) {
saveDrawingSurface();
mousedown.x = loc.x;
mousedown.y = loc.y;
if (selectedFunction === 'path' || selectedFunction === 'pathClosed') {
drawingContext.beginPath();
drawingContext.moveTo(loc.x, loc.y);
}
else if (selectedFunction === 'text') {
startDrawingText();
}
else {
editingText = false;
}
lastX = loc.x;
lastY = loc.y;
}
}
function moveControlPoint(loc) {
controlPoint.x = loc.x;
controlPoint.y = loc.y;
}
function mouseMoveOrTouchMoveInDrawingCanvas(loc) {
if (draggingControlPoint) {
restoreDrawingSurface();
moveControlPoint(loc);
drawingContext.save();
drawingContext.strokeStyle = RUBBERBAND_STROKE_STYLE;
drawingContext.lineWidth = RUBBERBAND_LINE_WIDTH;
drawCurve();
drawControlPoint();
drawingContext.restore();
}
else if (dragging) {
if (selectedFunction === 'erase') {
eraseLast();
drawEraser(loc);
}
else if (selectedFunction === 'slinky') {
drawSlinky(loc);
}
else if (selectedFunction === 'path' ||
selectedFunction === 'pathClosed') {
drawingContext.lineTo(loc.x, loc.y);
drawingContext.stroke();
}
else { // For lines, circles, rectangles, and curves, draw rubberbands
restoreDrawingSurface();
updateRubberbandRectangle(loc);
drawRubberband(loc);
}
lastX = loc.x;
lastY = loc.y;
lastRect.w = rubberbandW;
lastRect.h = rubberbandH;
}
if (dragging || draggingControlPoint) {
if (selectedFunction === 'line' ||
selectedFunction === 'rectangle' ||
selectedFunction === 'circle') {
drawGuidewires(loc.x, loc.y);
}
}
};
function endPath(loc) {
drawingContext.lineTo(loc.x, loc.y);
drawingContext.stroke();
if (selectedFunction === 'pathClosed') {
drawingContext.closePath();
if (doFill) {
drawingContext.fill();
}
drawingContext.stroke();
}
}
function mouseUpOrTouchEndInDrawingCanvas(loc) {
if (selectedFunction !== 'erase' && selectedFunction !== 'slinky') {
restoreDrawingSurface();
}
if (draggingControlPoint) {
moveControlPoint(loc);
finishDrawingCurve();
draggingControlPoint = false;
}
else if (dragging) {
if (selectedFunction === 'erase') {
eraseLast();
}
else if (selectedFunction === 'path' ||
selectedFunction === 'pathClosed') {
endPath(loc);
}
else {
if (selectedFunction === 'line') finishDrawingLine(loc);
else if (selectedFunction === 'rectangle') finishDrawingRectangle();
else if (selectedFunction === 'circle') finishDrawingCircle(loc);
else if (selectedFunction === 'curve') startEditingCurve(loc);
}
}
dragging = false;
};
// Control canvas event handlers.................................
iconCanvas.onmousedown = function (e) {
var x = e.x || e.clientX,
y = e.y || e.clientY,
loc = windowToCanvas(iconCanvas, x, y);
e.preventDefault();
mouseDownOrTouchStartInControlCanvas(loc);
}
iconCanvas.addEventListener('touchstart', function (e) {
if (e.touches.length === 1) {
e.preventDefault();
mouseDownOrTouchStartInControlCanvas(
windowToCanvas(iconCanvas,
e.touches[0].clientX, e.touches[0].clientY));
}
});
// Drawing canvas event handlers.................................
drawingCanvas.onmousedown = function (e) {
var x = e.x || e.clientX,
y = e.y || e.clientY;
e.preventDefault();
mouseDownOrTouchStartInDrawingCanvas(
windowToCanvas(drawingCanvas, x, y));
}
drawingCanvas.ontouchstart = function (e) {
if (e.touches.length === 1) {
e.preventDefault();
mouseDownOrTouchStartInDrawingCanvas(
windowToCanvas(drawingCanvas,
e.touches[0].clientX, e.touches[0].clientY));
}
}
drawingCanvas.ontouchmove = function (e) {
if (e.touches.length === 1) {
mouseMoveOrTouchMoveInDrawingCanvas(
windowToCanvas(drawingCanvas,
e.touches[0].clientX, e.touches[0].clientY));
}
}
drawingCanvas.ontouchend = function (e) {
var loc;
if (e.changedTouches.length === 1) {
loc = windowToCanvas(drawingCanvas, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
mouseUpOrTouchEndInDrawingCanvas(loc);
}
}
drawingCanvas.onmousemove = function (e) {
var x = e.x || e.clientX,
y = e.y || e.clientY,
loc = windowToCanvas(drawingCanvas, x, y);
e.preventDefault();
mouseMoveOrTouchMoveInDrawingCanvas(loc);
}
drawingCanvas.onmouseup = function (e) {
var x = e.x || e.clientX,
y = e.y || e.clientY,
loc = windowToCanvas(drawingCanvas, x, y);
e.preventDefault();
mouseUpOrTouchEndInDrawingCanvas(loc);
}
// Control event handlers........................................
strokeStyleSelect.onchange = function (e) {
drawingContext.strokeStyle = strokeStyleSelect.value;
};
fillStyleSelect.onchange = function (e) {
drawingContext.fillStyle = fillStyleSelect.value;
};
lineWidthSelect.onchange = function (e) {
drawingContext.lineWidth = lineWidthSelect.value;
/*
var c = drawingContext.canvas,
sw = c.width,
sh = c.height,
dw = sw * lineWidthSelect.value,
dh = sh * lineWidthSelect.value;
drawingContext.scale(lineWidthSelect.value, lineWidthSelect.value);
drawingContext.drawImage(c, 0, 0);
*/
};
eraseAllButton.onclick = function (e) {
drawingContext.clearRect(0,0,
drawingCanvas.width,
drawingCanvas.height);
drawGrid(drawingContext, GRID_LINE_COLOR, 10, 10);
saveDrawingSurface();
rubberbandW = rubberbandH = 0;
};
curveInstructionsOkayButton.onclick = function (e) {
curveInstructions.style.display = 'none';
};
curveInstructionsNoMoreButton.onclick = function (e) {
curveInstructions.style.display = 'none';
showCurveInstructions = false;
};
snapshotButton.onclick = function (e) {
var dataUrl;
if (snapshotButton.value === 'Take snapshot') {
dataUrl = drawingCanvas.toDataURL();
snapshotImageElement.src = dataUrl;
snapshotImageElement.style.display = 'inline';
snapshotInstructions.style.display = 'inline';
drawingCanvas.style.display = 'none';
iconCanvas.style.display = 'none';
controls.style.display = 'none';
snapshotButton.value = 'Back to Paint';
}
else {
snapshotButton.value = 'Take snapshot';
drawingCanvas.style.display = 'inline';
iconCanvas.style.display = 'inline';
controls.style.display = 'inline';
snapshotImageElement.style.display = 'none';
snapshotInstructions.style.display = 'none';
}
};
function drawBackground() {
backgroundContext.canvas.width = drawingContext.canvas.width;
backgroundContext.canvas.height = drawingContext.canvas.height;
drawGrid(backgroundContext, GRID_LINE_COLOR, 10, 10);
}
// Initialization................................................
iconContext.strokeStyle = ICON_STROKE_STYLE;
iconContext.fillStyle = ICON_FILL_STYLE;
iconContext.font = '48px Palatino';
iconContext.textAlign = 'center';
iconContext.textBaseline = 'middle';
drawingContext.font = '48px Palatino';
drawingContext.textBaseline = 'bottom';
drawingContext.strokeStyle = strokeStyleSelect.value;
drawingContext.fillStyle = fillStyleSelect.value;
drawingContext.lineWidth = lineWidthSelect.value;
drawGrid(drawingContext, GRID_LINE_COLOR, 10, 10);
selectedRect = ICON_RECTANGLES[SLINKY_ICON];
selectedFunction = 'slinky';
// This event listener prevents touch devices from
// scrolling the visible viewport.
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
drawIcons();
drawBackground();
/*
if (window.matchMedia) alert('found'); else alert('nope');
var mql = window.matchMedia("(orientation:landscape)");
if (mql.addListener) alert('found'); else alert('nope');
function listener(mql) { alert ('...'); }
mql.addListener( listener );
listener(mql);
*/
keyboard.appendTo('keyboard');
keyboard.addKeyListener( function (key) {
if (key === 'Enter') enter();
else if (key === '<') backspace();
else insert(key);
});
