SHARE
TWEET

Untitled

a guest Mar 20th, 2017 79 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. // Copyright 2010 William Malone (www.williammalone.com)
  3. //
  4. // Licensed under the Apache License, Version 2.0 (the "License");
  5. // you may not use this file except in compliance with the License.
  6. // You may obtain a copy of the License at
  7. //
  8. //   http://www.apache.org/licenses/LICENSE-2.0
  9. //
  10. // Unless required by applicable law or agreed to in writing, software
  11. // distributed under the License is distributed on an "AS IS" BASIS,
  12. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. // See the License for the specific language governing permissions and
  14. // limitations under the License.
  15.  
  16. var canvas;
  17. var context;
  18. var canvasWidth = 1000;
  19. var canvasHeight = 500;
  20. var padding = 25;
  21. var lineWidth = 8;
  22. var outlineImage = new Image();
  23. var crayonImage = new Image();
  24. var markerImage = new Image();
  25. var eraserImage = new Image();
  26. var crayonBackgroundImage = new Image();
  27. var markerBackgroundImage = new Image();
  28. var eraserBackgroundImage = new Image();
  29. var crayonTextureImage = new Image();
  30. var clickX = new Array();
  31. var clickY = new Array();
  32. var clickColor = new Array();
  33. var clickTool = new Array();
  34. var clickSize = new Array();
  35. var clickDrag = new Array();
  36. var paint = false;
  37. var curColor = "#000000";
  38. var curTool = "marker";
  39. var curSize = "normal";
  40. var mediumStartX = 18;
  41. var mediumStartY = 19;
  42. var mediumImageWidth = 93;
  43. var mediumImageHeight = 46;
  44. var drawingAreaX = 10;
  45. var drawingAreaY = 11;
  46. var drawingAreaWidth = 1000;
  47. var drawingAreaHeight = 500;
  48. var toolHotspotStartY = 23;
  49. var toolHotspotHeight = 38;
  50. var sizeHotspotStartY = 157;
  51. var sizeHotspotHeight = 36;
  52. var sizeHotspotWidthObject = new Object();
  53. sizeHotspotWidthObject.huge = 39;
  54. sizeHotspotWidthObject.large = 25;
  55. sizeHotspotWidthObject.normal = 18;
  56. sizeHotspotWidthObject.small = 16;
  57. var totalLoadResources = 1;
  58. var curLoadResNum = 0;
  59. /**
  60. * Calls the redraw function after all neccessary resources are loaded.
  61. */
  62. function resourceLoaded()
  63. {
  64.     if(++curLoadResNum >= totalLoadResources){
  65.         redraw();
  66.     }
  67. }
  68.  
  69. /**
  70. * Creates a canvas element, loads images, adds events, and draws the canvas for the first time.
  71. */
  72. function prepareCanvas()
  73. {
  74.     // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
  75.     var canvasDiv = document.getElementById('canvasDiv');
  76.     canvas = document.createElement('canvas');
  77.     canvas.setAttribute('width', canvasWidth);
  78.     canvas.setAttribute('height', canvasHeight);
  79.     canvas.setAttribute('id', 'canvas');
  80.     canvasDiv.appendChild(canvas);
  81.     if(typeof G_vmlCanvasManager != 'undefined') {
  82.         canvas = G_vmlCanvasManager.initElement(canvas);
  83.     }
  84.     context = canvas.getContext("2d"); // Grab the 2d canvas context
  85.     // Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
  86.     //     context = document.getElementById('canvas').getContext("2d");
  87.    
  88.     // Load images
  89.     // -----------
  90.    
  91.     outlineImage.onload = function() { resourceLoaded();
  92.     };
  93.     outlineImage.src = "https://i.imgur.com/oF94e1N.png";
  94.  
  95.     // Add mouse events
  96.     // ----------------
  97.     $('#canvas').mousedown(function(e)
  98.     {
  99.         // Mouse down location
  100.         var mouseX = e.pageX - this.offsetLeft;
  101.         var mouseY = e.pageY - this.offsetTop;
  102.        
  103.  
  104.         paint = true;
  105.         addClick(mouseX, mouseY, false);
  106.         redraw();
  107.     });
  108.    
  109.     $('#canvas').mousemove(function(e){
  110.         if(paint==true){
  111.             curSize = document.getElementById("brushSize").value
  112.             addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
  113.             redraw();
  114.         }
  115.     });
  116.    
  117.     $('#canvas').mouseup(function(e){
  118.         paint = false;
  119.         redraw();
  120.     });
  121.    
  122.     $('#canvas').mouseleave(function(e){
  123.         paint = false;
  124.     });
  125. }
  126.  
  127. /**
  128. * Adds a point to the drawing array.
  129. * @param x
  130. * @param y
  131. * @param dragging
  132. */
  133. function addClick(x, y, dragging)
  134. {
  135.     clickX.push(x);
  136.     clickY.push(y);
  137.     clickTool.push(curTool);
  138.     clickColor.push(curColor);
  139.     clickSize.push(curSize);
  140.     clickDrag.push(dragging);
  141. }
  142.  
  143. /**
  144. * Clears the canvas.
  145. */
  146. function clearCanvas()
  147. {
  148.     context.clearRect(0, 0, canvasWidth, canvasHeight);
  149. }
  150.  
  151. /**
  152. * Redraws the canvas.
  153. */
  154. function redraw()
  155. {
  156.     // Make sure required resources are loaded before redrawing
  157.     if(curLoadResNum < totalLoadResources){ return; }
  158.    
  159.     clearCanvas();
  160.    
  161.     var locX;
  162.     var locY;
  163.    
  164.     if(curTool == "marker")
  165.     {
  166.         // Draw the marker tool background
  167.         context.drawImage(markerBackgroundImage, 0, 0, canvasWidth, canvasHeight);
  168.     }
  169.    
  170.     // Keep the drawing in the drawing area
  171.     context.save();
  172.     context.beginPath();
  173.     context.rect(drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
  174.     context.clip();
  175.        
  176.     var radius;
  177.     var i = 0;
  178.     for(; i < clickX.length; i++)
  179.     {      
  180.         radius = clickSize[i];
  181.        
  182.         context.beginPath();
  183.         if(clickDrag[i] && i){
  184.             context.moveTo(clickX[i-1], clickY[i-1]);
  185.         }else{
  186.             context.moveTo(clickX[i], clickY[i]);
  187.         }
  188.         context.lineTo(clickX[i], clickY[i]);
  189.         context.closePath();
  190.        
  191.         if(clickTool[i] == "eraser"){
  192.             //context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white
  193.             context.strokeStyle = 'white';
  194.         }else{
  195.             //context.globalCompositeOperation = "source-over"; // To erase instead of draw over with white
  196.             context.strokeStyle = clickColor[i];
  197.         }
  198.         context.lineJoin = "round";
  199.         context.lineWidth = radius;
  200.         context.stroke();
  201.        
  202.     }
  203.     //context.globalCompositeOperation = "source-over";// To erase instead of draw over with white
  204.     context.restore();
  205.    
  206.     // Overlay a crayon texture (if the current tool is crayon)
  207.  
  208.     context.globalAlpha = 1; // No IE support
  209.    
  210.     // Draw the outline image
  211.     context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight);
  212. }
  213.  
  214.  
  215. /**/
RAW Paste Data
Pastebin PRO Summer Special!
Get 60% OFF on Pastebin PRO accounts!
Top