The text below is selected, press Ctrl+C to copy to your clipboard. (⌘+C on Mac) No line numbers will be copied.
Guest
MyCode
By Guest on 16th May 2019 05:10:26 AM | Syntax: HTML5 | Views: 2



New paste | Download | Show/Hide line no. | Copy text to clipboard
  1.  
  2.   <meta charset="UTF-8">
  3.   <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  4.   <meta name="author" content="Manasan">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" type="text/css" href="index.css">
  7. <!-- <style src="/index.css" hh type="text/css"></style> -->
  8. <script src="index.js" type="text/javascript"></script>
  9.  
  10.     <script type="text/javascript">
  11.  
  12.     var canvas, canvasimg, backgroundImage, finalImg;
  13.     var mouseClicked = false;
  14.     var prevX = 0;
  15.     var currX = 0;
  16.     var prevY = 0;
  17.     var currY = 0;
  18.     var fillStyle = "black";
  19.     var globalCompositeOperation = "source-over";
  20.     var lineWidth  = 2;
  21.     var x1  = 0;
  22.     var y1  = 0;
  23.     var theta =0 ;    
  24.    
  25.  
  26.     function init() {
  27.       // var imageSrc = '/abstract-geometric-pattern_23-2147508597.jpg'
  28.       // backgroundImage = new Image();
  29.       // backgroundImage.src = imageSrc;
  30.       canvas = document.getElementById('can');
  31.       // finalImg = document.getElementById('finalImg');
  32.       // canvasimg = document.getElementById('canvasimg');
  33.       // canvas.style.backgroundImage = "url('" + imageSrc + "')";
  34.       canvas.addEventListener("mousemove", handleMouseEvent);
  35.       canvas.addEventListener("mousedown", handleMouseEvent);
  36.       canvas.addEventListener("mouseup", handleMouseEvent);
  37.       canvas.addEventListener("mouseout", handleMouseEvent);
  38.       canvas.addEventListener("touchstart", handleMouseEvent);
  39.       canvas.addEventListener("touchmove", handleMouseEvent, false);
  40.       canvas.addEventListener("touchend", handleMouseEvent, false);
  41.       canvas.addEventListener("touchcancel", handleMouseEvent, false);
  42.  
  43.       var bodyH=screen.height;
  44.       var bodyW=screen.width;
  45.        canH=document.getElementById('can');
  46.        canW=document.getElementById('can');
  47.       if (bodyW>bodyH){canH.style.marginTop ='5%';canH.style.marginLeft ='25%';canW.width=canH.height=bodyH*90/100;canH=canH.height;canW=canW.width; r1=canH*90/100/2; r2=canH*60/100/2; }
  48.       else{canH.style.marginLeft ='5%';canH.style.marginTop ='25%';canH.height=canW.width=bodyW*(90/100);canH=canH.height;canW=canW.width; r1=canW*90/100/2; r2=canW*60/100/2;}
  49.      
  50.       //var r1=canW*90/100;var r2=canW*60/100;
  51.       // if (canW>canH) r1=canH*90/100;r2=canH*60/100;
  52.        ctx = canvas.getContext("2d");
  53.       ctx.beginPath();
  54.       ctx.arc(canW/2, canH/2, r1, 0, 2 * Math.PI, false);
  55.       ctx.moveTo(canW/2+r2,canH/2)
  56.       ctx.arc(canW/2, canH/2, r2, 0, 2 * Math.PI, false);
  57.       ctx.stroke();
  58.     }
  59.  
  60.     function getColor(btn) {
  61.       globalCompositeOperation = 'source-over';
  62.       lineWidth = 2;
  63.       switch (btn.getAttribute('data-color')) {
  64.         case "green":
  65.         fillStyle = "green";
  66.         break;
  67.         case "blue":
  68.         fillStyle = "blue";
  69.         break;
  70.         case "red":
  71.         fillStyle = "red";
  72.         break;
  73.         case "yellow":
  74.         fillStyle = "yellow";
  75.         break;
  76.         case "orange":
  77.         fillStyle = "orange";
  78.         break;
  79.         case "black":
  80.         fillStyle = "black";
  81.         break;
  82.         case "eraser":
  83.         globalCompositeOperation = 'destination-out';
  84.         fillStyle = "rgba(0,44,0,1)";
  85.         lineWidth = 14;
  86.         break;
  87.       }
  88.  
  89.     }
  90.  
  91.     function draw(dot) {
  92.       console.log(dot);
  93.       ctx = canvas.getContext("2d");
  94.       ctx.beginPath();
  95.       ctx.globalCompositeOperation = globalCompositeOperation;
  96.         cx=canW/2;cy=canH/2;ex=currX;ey=currY
  97.       var dy = ey - cy;
  98.       var dx = ex - cx;
  99.       theta = Math.atan2(dy, dx); // range (-PI, PI]
  100.       theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
  101.       if (theta < 0) theta +=360;
  102.     theta *= Math.PI / 180;
  103.     x1 = canW/2;
  104.     y1 = canH/2;
  105.     //theta = 0.5;
  106.     // ctx.moveTo(x1, y1);
  107.     ctx.moveTo(x1 + r1 * Math.cos(theta), y1 + r1 * Math.sin(theta));
  108.     ctx.lineTo(x1 + r2 * Math.cos(theta), y1 + r2 * Math.sin(theta))
  109.     if(Math.sqrt((currX-x1)**2+(currY-y1)**2)>r2 && Math.sqrt((currX-x1)**2+(currY-y1)**2)<r1) ctx.stroke();      // range [0, 360)
  110.        
  111.             document.getElementById('e2').innerText=Math.sqrt((currX-x1)**2+(currY-y1)**2)
  112.             // if(dot){
  113.             //   ctx.fillStyle = fillStyle;
  114.             //   ctx.fillRect(currX, currY, 2, 2);
  115.             // } else {
  116.             //   ctx.beginPath();
  117.             //   ctx.moveTo(prevX, prevY);
  118.             //   ctx.lineTo(currX, currY);
  119.             //   ctx.strokeStyle = fillStyle;
  120.             //   ctx.lineWidth = lineWidth;
  121.             //   ctx.stroke();
  122.             // }
  123.             ctx.closePath();
  124.           }
  125.  
  126.     function erase() {
  127.       if (1) {
  128.         var ctx = canvas.getContext("2d");
  129.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  130.        document.getElementById("canvasimg").style.display = "none";
  131.       }
  132.     }
  133.  
  134.     function save() {
  135.       canvas.style.border = "2px solid";
  136.       canvasimg.width = canvas.width;
  137.       canvasimg.height = canvas.height;
  138.       var ctx2 = canvasimg.getContext("2d");
  139.       // comment next line to save the draw only
  140.       ctx2.drawImage(backgroundImage, 0, 0);
  141.       ctx2.drawImage(canvas, 0, 0);
  142.       finalImg.src = canvasimg.toDataURL();
  143.       finalImg.style.display = "inline";
  144.     }
  145.  
  146.     function handleMouseEvent(e) {
  147.         e.preventDefault();console.log(e.type);
  148.       if ((e.type === 'mousedown' ) ||  (e.type === 'touchstart' ) )
  149.       {
  150.         prevX = currX;
  151.         prevY = currY;
  152.         currX = e.offsetX;
  153.         currY = e.offsetY;
  154.         mouseClicked = true;
  155.         draw(true);
  156.       }
  157.       if (e.type === 'mouseup' || e.type === "mouseout") {
  158.         mouseClicked = false;
  159.       }
  160.       if (e.type === 'mousemove') {  
  161.                ctx.beginPath();ctx.save();
  162.       ctx.arc(canW/2, canH/2, r1, 0, 2 * Math.PI, false);
  163.       ctx.lineWidth = 2
  164.       ctx.stroke()
  165.       ctx.moveTo(canW/2+r2,canH/2)
  166.       ctx.arc(canW/2, canH/2, r2, 0, 2 * Math.PI, false);
  167.       ctx.fillStyle = "white";
  168.       ctx.fill();
  169.       ctx.moveTo(canW/2+r2,canH/2)
  170.       ctx.arc(canW/2, canH/2, r2, 0, 2 * Math.PI, false);
  171.       ctx.stroke();
  172.           currX = e.offsetX;
  173.           currY = e.offsetY;
  174.         if(Math.sqrt((e.offsetX-canW/2)**2+(e.offsetY-canH/2)**2)>r2 && Math.sqrt((e.offsetX-canW/2)**2+(e.offsetY-canH/2)**2)<r1) {console.log(e.offsetX,e.offsetY);draw();} else
  175.         if (mouseClicked) {
  176.           prevX = currX;
  177.           prevY = currY;
  178.           currX = e.offsetX;
  179.           currY = e.offsetY;
  180.           draw();
  181.         }
  182.       }
  183.     }
  184.     </script></head>
  185.    
  186.     <body onload="init()">
  187.  
  188.       <canvas id="can" class="center" frameborder="0"  marginheight="0" marginwidth="0" >
  189.       </canvas>
  190.       <div style="position:absolute;top:12%;left:43%;">Choose Color</div>
  191.       <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" data-color="green" onclick="getColor(this)"></div>
  192.       <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" data-color="blue" onclick="getColor(this)"></div>
  193.       <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" data-color="red" onclick="getColor(this)"></div>
  194.       <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" data-color="yellow" onclick="getColor(this)"></div>
  195.       <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" data-color="orange" onclick="getColor(this)"></div>
  196.       <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" data-color="black" onclick="getColor(this)"></div>
  197.       <div style="position:absolute;top:20%;left:43%;" id="e2">Eraser</div>
  198.      
  199.       <canvas id="canvasimg" style="display:none;" ></canvas>
  200.       <img id="finalImg" style="position:absolute;top:10%;left:52%;display:none;" >
  201.       <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:5%;left:10%;">
  202.       <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:5%;left:15%;">
  203.     </body>
  204.     </html>



  • Recent Pastes
  • Lala
    7 mins ago
  • Fdsfd
    1 hour 1 min 47 secs ago
  • Sdfsdf s
    1 hour 2 mins 43 secs ago
  • Surung
    1 hour 18 mins 23 secs ago
  • Cozy
    1 hour 20 mins 48 secs ago