A Pen by Eric Fickes on CodePen.
Created
February 5, 2014 21:41
-
-
Save DoubleBrotherProgrammer/8833751 to your computer and use it in GitHub Desktop.
A Pen by Eric Fickes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- this code inherited from : http://stackoverflow.com/questions/2368784/draw-by-mouse-with-html5-canvas --> | |
| <html> | |
| <body onload="init()"> | |
| <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas> | |
| <div style="position:absolute;top:12%;left:43%;">Choose Color</div> | |
| <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div> | |
| <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div> | |
| <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div> | |
| <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div> | |
| <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div> | |
| <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div> | |
| <div style="position:absolute;top:20%;left:43%;">Eraser</div> | |
| <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div> | |
| <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;"> | |
| <input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;"> | |
| <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;"> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas, ctx, flag = false, | |
| prevX = 0, | |
| currX = 0, | |
| prevY = 0, | |
| currY = 0, | |
| dot_flag = false; | |
| var x = "black", | |
| y = 2; | |
| function init() { | |
| canvas = document.getElementById('can'); | |
| ctx = canvas.getContext("2d"); | |
| w = canvas.width; | |
| h = canvas.height; | |
| canvas.addEventListener("mousemove", function (e) { | |
| findxy('move', e) | |
| }, false); | |
| canvas.addEventListener("mousedown", function (e) { | |
| findxy('down', e) | |
| }, false); | |
| canvas.addEventListener("mouseup", function (e) { | |
| findxy('up', e) | |
| }, false); | |
| canvas.addEventListener("mouseout", function (e) { | |
| findxy('out', e) | |
| }, false); | |
| } | |
| function color(obj) { | |
| switch (obj.id) { | |
| case "green": | |
| x = "green"; | |
| break; | |
| case "blue": | |
| x = "blue"; | |
| break; | |
| case "red": | |
| x = "red"; | |
| break; | |
| case "yellow": | |
| x = "yellow"; | |
| break; | |
| case "orange": | |
| x = "orange"; | |
| break; | |
| case "black": | |
| x = "black"; | |
| break; | |
| case "white": | |
| x = "white"; | |
| break; | |
| } | |
| if (x == "white") y = 14; | |
| else y = 2; | |
| } | |
| function draw() { | |
| ctx.beginPath(); | |
| ctx.moveTo(prevX, prevY); | |
| ctx.lineTo(currX, currY); | |
| ctx.strokeStyle = x; | |
| ctx.lineWidth = y; | |
| ctx.stroke(); | |
| ctx.closePath(); | |
| } | |
| function erase() { | |
| var m = confirm("Want to clear"); | |
| if (m) { | |
| ctx.clearRect(0, 0, w, h); | |
| document.getElementById("canvasimg").style.display = "none"; | |
| } | |
| } | |
| function save() { | |
| document.getElementById("canvasimg").style.border = "2px solid"; | |
| var dataURL = canvas.toDataURL(); | |
| document.getElementById("canvasimg").src = dataURL; | |
| document.getElementById("canvasimg").style.display = "inline"; | |
| } | |
| function findxy(res, e) { | |
| if (res == 'down') { | |
| prevX = currX; | |
| prevY = currY; | |
| currX = e.clientX - canvas.offsetLeft; | |
| currY = e.clientY - canvas.offsetTop; | |
| flag = true; | |
| dot_flag = true; | |
| if (dot_flag) { | |
| ctx.beginPath(); | |
| ctx.fillStyle = x; | |
| ctx.fillRect(currX, currY, 2, 2); | |
| ctx.closePath(); | |
| dot_flag = false; | |
| } | |
| } | |
| if (res == 'up' || res == "out") { | |
| flag = false; | |
| } | |
| if (res == 'move') { | |
| if (flag) { | |
| prevX = currX; | |
| prevY = currY; | |
| currX = e.clientX - canvas.offsetLeft; | |
| currY = e.clientY - canvas.offsetTop; | |
| draw(); | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html * | |
| { | |
| font-size: 1em !important; | |
| color: #000 !important; | |
| font-family: Arial !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment