This is the HTML5 Canvas tag with drawing, clear pad and change marker width functionality created in Javascript. It is based on the code by Richard Barkinskyi http://codepen.io/barkins/pen/irkja
Created
April 11, 2022 18:31
-
-
Save hernan43/f8bb2f914557650396f0ebd405d11d92 to your computer and use it in GitHub Desktop.
Javascript Canvas Sketchpad
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
| <head> | |
| <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'/> | |
| </head> | |
| <header> | |
| <h1>Sketch Pad: Go ahead! Be an Artist. (HTML5 "Canvas" tag with some Javascript) </h1> | |
| </header> | |
| <!-- HTML FOR JAVASCRIPT SKETCHBOOK ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> | |
| <section> | |
| <div class="sketchy"> | |
| <article> | |
| <div> | |
| <div> | |
| <div id="marker-container"> | |
| <h2>Change Marker Width</h2> | |
| <input id="marker" type="range" max="10" min="1" value="1"> | |
| <div id="shape"></div> | |
| </div> | |
| <button id="clear">Clear Pad : : : Make New Sketch!</button> | |
| </div> | |
| <div> | |
| <canvas width="575" height="300" id="canvas"></canvas> | |
| </div><!-- class="medium-9 column" data-equalizer-watch --> | |
| </div> <!-- class="row" --> | |
| </article> | |
| </div> <!-- .sketchy --> | |
| </section> | |
| <div class="copyright"> | |
| <em >This is my modification of Richard Barkins's code; Copyright (c) 2014 by Richard (<a href="https://codepen.io/barkins/pen/irkja" target="_blank" >https://codepen.io/barkins/pen/irkja</a>)</em> | |
| </div> |
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 marker = "rgb(0,0,0)"; | |
| var markerWidth = 1; | |
| var lastEvent; | |
| var mouseDown = false; | |
| var context = $('canvas')[0].getContext('2d'); | |
| var $canvas = $('#canvas'); | |
| $canvas.mousedown(function(e){ | |
| lastEvent = e; | |
| mouseDown = true; | |
| console.log(lastEvent); | |
| }).mousemove(function(e){ | |
| if(mouseDown){ | |
| context.beginPath(); | |
| context.moveTo(lastEvent.offsetX,lastEvent.offsetY); | |
| context.lineTo(e.offsetX,e.offsetY); | |
| context.lineWidth=markerWidth; | |
| context.strokeStyle = marker; | |
| context.lineCap='round'; | |
| context.stroke(); | |
| lastEvent = e; | |
| } | |
| }).mouseup(function(){ | |
| mouseDown = false; | |
| }); | |
| /****CLEAR****/ | |
| var clear = function(){ | |
| context.clearRect(0,0,575,300); | |
| }; | |
| $('#clear').on("click",clear); | |
| /****CHANGE MARGER WIDTH****/ | |
| var changeWidth = function(){ | |
| markerWidth = $("#marker").val(); | |
| console.log(markerWidth); | |
| }; | |
| $("#marker").change(changeWidth); | |
| /*Copyright (c) 2014 by Richard (https://codepen.io/barkins/pen/irkja)*/ |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| // Richard Tigred Barkinskyi's Javascript Sketchbook | |
| * { | |
| box-sizing:border-box; | |
| //font-family:sans-serif; | |
| } | |
| body {background: orange;} | |
| h1 { font-family: 'Poiret One'; | |
| font-size: 1.5rem; | |
| text-align: center; | |
| clear: both; | |
| } | |
| p { font-family: 'Poiret One'; | |
| font-size: .9rem; | |
| text-align: center; | |
| } | |
| // "sketchy" is the class for the overall div | |
| .sketchy { | |
| max-width:100%; | |
| margin:25px auto; | |
| padding:25px; | |
| border-radius:10px; | |
| text-align:center; | |
| background-image: url("http://jdswebs.net/img/css-background-blue.jpg"); | |
| background-color: #cccccc; | |
| margin-top:-10px; | |
| canvas { | |
| background:#FFF; | |
| border-radius:10px; | |
| box-shadow:0 0 15px #999; | |
| cursor:crosshair; | |
| } | |
| #marker-container { | |
| max-width:200px; | |
| background:#333; | |
| margin:25px auto; | |
| padding:15px; | |
| border-radius:10px; | |
| float: right | |
| ; | |
| h2 { | |
| color:#FFF; | |
| margin:0 0 15px; | |
| font-weight:normal; | |
| font-size:1.2rem; | |
| } | |
| } | |
| } | |
| #clear { | |
| font-size:1rem; | |
| background:brown; | |
| color:#FFF; | |
| border:0; | |
| padding:10px; | |
| border-radius:5px; | |
| cursor:pointer; | |
| &:hover { | |
| background:#FFF; | |
| color:#cc3300; | |
| } | |
| } | |
| #shape { | |
| width: 0; | |
| height: 0; | |
| border-left: 125px solid transparent; | |
| border-right: 0px solid transparent; | |
| border-bottom: 15px solid #999; | |
| margin:5px auto; | |
| } | |
| .copyright {text-align: center;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment