CANVAS ERASER

var canvas = document.getElementById("canvas"),context = canvas.getContext("2d"),strokeStyleSelect = document.getElementById("strokeStyleSelect"),fillStyleSelect = document.getElementById("fillStyleSelect"),drawRadio = document.getElementById("drawRadio"),eraserShapeSelect = document.getElementById("eraserShapeSelect"),eraserWidthSelect = document.getElementById("eraserWidthSelect"),ERASER_LINE_WIDTH = 1,ERASER_SHADOW_COLOR = 'rgb(0,0,0)',ERASER_SHADOW_STYLE = 'blue',ERASER_STROKE_STYLE = 'rgb(0,0,255)',ERASER_SHADOW_OFFSET = -5,ERASER_SHADOW_BLUR = 20,GRID_HORIZONTAL_SPACING = 10,GRID_VERTICAL_SPACING = 10,GRID_LINE_COLOR = 'lightblue',drawingSurfaceImageData,lastX,lastY,mousedown = {},rubberbandRect = {},dragging = false,guidewires = true;//Functions..............................................................function drawGrid(color, stepx, stepy) {}function windowToCanvas(x, y){var bbox = canvas.getBoundingClientRect();return { x: x - bbox.left * (canvas.width /  bbox.width), y: y - bbox.top * (canvas.height / bbox.height)}//Save and restore drawing surface.............................function saveDrawingSurface() {drawingSurfaceImageData = context.getImageData(0, 0,canvas.width,canvas.height);}function restoreDrawingSurface() {context.putImageData(drawingSurfaceImageData, 0, 0);}//Rubber bands......................................................function updateRubberbandRectangle(loc) {//}function drawRubberbandShape(loc) {var angle = Math.atan(rubberbandRect.height/ rubberbandRect.width),radius = rubberbandRect.height/ Math.sin(angle);if (mousedown.y === loc.y) {radius = Math.abs(loc.x - mousedown.x);}context.beginPath();context.arc(mousedown.x, mousedown.y, radius, 0, Math.PI*2, false);context.stroke();context.fill();}function updateRubberband(loc) {updateRubberbandRectangle(loc);drawRubberbandShape(loc);}//Guidewires........................................................function drawGuidewires(x, y) {}//Eraser........................................................function setDrawPathForEraser(loc) {var eraserWidth = parseFloat(eraserWidthSelect.value);context.beginPath();if(eraserShapeSelect.value === 'circle') {context.arc(loc.x, loc.y,eraserWidth/ 2,0, Math.PI*2, false);}else{context.rect(loc.x - eraserWidth/2, loc.y - eraserWidth/2, eraserWidth, eraserWidth);}context.clip();}function setErasePathEraser() {var eraserWidth = parseFloat(eraserWidthSelect.value);context.beginPath();if (eraserShapeSelect.value === 'circle') {context.arc(lastX, lastY,eraserWidth/2 + ERASER_LINE_WIDTH,0, Math.PI*2, false);}else{context.rect(lastX - eraserWidth/2 -ERASER_LINE_WIDTH, lastY - eraserWidth/2 - ERASER_LINE_WIDTH, eraserWidth + ERASER_LINE_WIDTH*2, eraserWidth + ERASER_LINE_WIDTH*2);}context.clip();}function setEraserAttributes() {context.lineWidth = ERASER_LINE_WIDTH;context.shadowColor = ERASER_SHADOW_STYLE;context.shadowOffsetX = ERASER_SHADOW_OFFSET;context.shadowOffsetY = ERASER_SHADOW_OFFSET;context.shadowBlur = ERASER_SHADOW_BLUR;context.strokeSylte = ERASER_STROKE_STYLE;}function eraseLast() {context.save();setErasePathForEraser();drawGrid(GRID_LINE_COLOR,GRID_HORIZONTAL_SPACING,GRID_VERTICAL_SPACING);context.restore();}function drawEraser(loc) {context.save();setEraserAttributes();setDrawPathForEraser(loc);context.stroke();context.restore();}canvas.onmousedown = function (e) {var loc = windowToCanvas(e.clientX, e.clientY);e.preventDefault();if (drawRadio.checked) {saveDrawingSurface();}mousedown.x = loc.x;mousedown.y = loc.y;lastX = loc.x;lastY = loc.y;dragging = true;};canvas.onmousemove = function (e) {var loc;if(dragging) {e.preventDefault();loc = windowToCanvas(e.clientX, e.clientY);if(drawRadio.checked) {restoreDrawingSurface();updateRubberband(loc);if(guidewires) {drawGuidewires(loc.x, loc.y);}}else{eraseLast();drawEraser(loc);}lastX = loc.x;lastY = loc.y;}};canvas.onmouseup = function (e) {loc = windowToCanvas(e.clientX, e.clientY);if (drawRadio.checked) {restoreDrawingSurface();updateRubberband(loc);}if (eraserRadio.checked) {eraseLast();}dragging = false;};//Controls event handlers.........................................strokeStyleSelect.onchange = function (e) {context.strokeStyle = strokeStyleSelect.value;};fillStyleSelect.onchange = function (e) {context.fillStyle = fillStyleSelect.value;};//Initalization.....................................................context.strokeStyle = strokeStyleSelect.value;context.fillStyle = fillStyleSelect.value;drawGrid(GRID_LINE_COLOR,GRID_HORIZONTAL_SPACING,GRID_VERTICAL_SPACING);}