Last active
July 12, 2022 17:09
-
-
Save siddsarkar/75bf5cc08d3dec0166f72c1723321d17 to your computer and use it in GitHub Desktop.
HTML5 Canvas Whiteboard
This file contains 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
| window.onload = function () { | |
| var myCanvas = document.getElementById("myCanvas"); | |
| var ctx = myCanvas.getContext("2d"); | |
| // Fill Window Width and Height | |
| myCanvas.width = window.innerWidth; | |
| myCanvas.height = window.innerHeight; | |
| // Set Background Color | |
| ctx.fillStyle = "#292a2d"; | |
| ctx.fillRect(0, 0, myCanvas.width, myCanvas.height); | |
| // Mouse Event Handlers | |
| if (myCanvas) { | |
| var isDown = false; | |
| var canvasX, canvasY; | |
| ctx.lineWidth = 1; | |
| myCanvas.onmousedown = (e) => { | |
| isDown = true; | |
| ctx.beginPath(); | |
| canvasX = e.pageX - myCanvas.offsetLeft; | |
| canvasY = e.pageY - myCanvas.offsetTop; | |
| ctx.moveTo(canvasX, canvasY); | |
| }; | |
| myCanvas.onmousemove = (e) => { | |
| if (isDown !== false) { | |
| canvasX = e.pageX - myCanvas.offsetLeft; | |
| canvasY = e.pageY - myCanvas.offsetTop; | |
| ctx.lineTo(canvasX, canvasY); | |
| ctx.strokeStyle = "#d7d7db"; | |
| ctx.stroke(); | |
| } | |
| }; | |
| myCanvas.onmouseup = (e) => { | |
| isDown = false; | |
| ctx.closePath(); | |
| }; | |
| } | |
| // Touch Events Handlers | |
| draw = { | |
| started: false, | |
| start: function (evt) { | |
| ctx.beginPath(); | |
| ctx.moveTo(evt.touches[0].pageX, evt.touches[0].pageY); | |
| this.started = true; | |
| }, | |
| move: function (evt) { | |
| if (this.started) { | |
| ctx.lineTo(evt.touches[0].pageX, evt.touches[0].pageY); | |
| ctx.strokeStyle = "#000"; | |
| ctx.lineWidth = 5; | |
| ctx.stroke(); | |
| } | |
| }, | |
| end: function (evt) { | |
| this.started = false; | |
| } | |
| }; | |
| // Touch Events | |
| myCanvas.addEventListener("touchstart", draw.start, false); | |
| myCanvas.addEventListener("touchend", draw.end, false); | |
| myCanvas.addEventListener("touchmove", draw.move, false); | |
| // Disable Page Move | |
| document.body.addEventListener( | |
| "touchmove", | |
| function (evt) { | |
| evt.preventDefault(); | |
| }, | |
| false | |
| ); | |
| }; |
This file contains 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
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>HTML5 Canvas Whiteboard</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body, | |
| html { | |
| height: 100%; | |
| } | |
| #myCanvas { | |
| cursor: crosshair; | |
| position: fixed; | |
| } | |
| </style> | |
| <canvas id="myCanvas"> | |
| Sorry, your browser does not support HTML5 canvas technology. | |
| </canvas> | |
| <script src="draw.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment