├── img └── Screenshot (546).png ├── README.md ├── index.html └── index.js /img/Screenshot (546).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dsnehasish74/White_Board/HEAD/img/Screenshot (546).png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |

🎨 White Board 🎨

3 | 4 | Minimalistic White Board to ease the online teaching 5 | 6 | 7 | Visit Our site 8 | 9 |

10 | 11 |
12 |
13 | 14 | ![whiteBoard](https://socialify.git.ci/dsnehasish74/White_Board/image?font=Bitter&forks=1&language=1&owner=1&pattern=Circuit%20Board&pulls=1&stargazers=1&theme=Dark) 15 | 16 | ### Screen Shots 17 | ![scrrenshot](https://github.com/dsnehasish74/White_Board/blob/main/img/Screenshot%20(546).png) 18 | 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | White Board 8 | 43 | 44 | 45 | 46 |

47 |

57 |

58 |

60 | 61 | 62 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('board'); 2 | var RedPen = document.getElementById('red'); 3 | var BluePen = document.getElementById('blue'); 4 | var GreenPen = document.getElementById('green'); 5 | var BlackPen = document.getElementById('black'); 6 | var YellowPen = document.getElementById('yellow'); 7 | var Rubber = document.getElementById('rubber'); 8 | var Clear = document.getElementById('clear'); 9 | var Save = document.getElementById('save'); 10 | var ctx = canvas.getContext('2d'); 11 | canvas.width = window.innerWidth; 12 | canvas.height = window.innerHeight; 13 | ctx.lineCap = 'round'; 14 | ctx.lineWidth = 2; 15 | 16 | var makeBgWhite = function () { 17 | ctx.fillStyle = '#ffffff'; 18 | ctx.globalCompositeOperation = 'destination-over'; 19 | ctx.fillRect(0, 0, canvas.width, canvas.height); 20 | }; 21 | 22 | makeBgWhite(); 23 | // ctx.moveTo(10,0); 24 | // ctx.lineTo(200,100); 25 | // ctx.stroke(); 26 | var lastX = 0, 27 | lastY = 0; 28 | var isMouseDown = false; 29 | 30 | // Download utility function 31 | var download = function () { 32 | var link = document.createElement('a'); 33 | link.download = 'filename.png'; 34 | link.href = document.getElementById('board').toDataURL(); 35 | document.body.appendChild(link); 36 | link.click(); 37 | document.body.removeChild(link); 38 | }; 39 | 40 | canvas.addEventListener('mousedown', (e) => { 41 | lastX = e.offsetX; 42 | lastY = e.offsetY; 43 | isMouseDown = true; 44 | }); 45 | 46 | canvas.addEventListener('mousemove', (e) => { 47 | if (!isMouseDown) return; 48 | ctx.beginPath(); 49 | ctx.moveTo(lastX, lastY); 50 | ctx.lineTo(e.offsetX, e.offsetY); 51 | ctx.stroke(); 52 | lastX = e.offsetX; 53 | lastY = e.offsetY; 54 | }); 55 | 56 | canvas.addEventListener('mouseup', (e) => { 57 | isMouseDown = false; 58 | }); 59 | 60 | RedPen.addEventListener('click', (e) => { 61 | ctx.globalCompositeOperation = 'source-over'; 62 | ctx.strokeStyle = 'red'; 63 | ctx.lineWidth = 1; 64 | }); 65 | BluePen.addEventListener('click', (e) => { 66 | ctx.globalCompositeOperation = 'source-over'; 67 | ctx.strokeStyle = 'blue'; 68 | ctx.lineWidth = 1; 69 | }); 70 | GreenPen.addEventListener('click', (e) => { 71 | ctx.globalCompositeOperation = 'source-over'; 72 | ctx.strokeStyle = 'green'; 73 | ctx.lineWidth = 1; 74 | }); 75 | BlackPen.addEventListener('click', (e) => { 76 | ctx.globalCompositeOperation = 'source-over'; 77 | ctx.strokeStyle = 'black'; 78 | ctx.lineWidth = 1; 79 | }); 80 | Rubber.addEventListener('click', (e) => { 81 | ctx.globalCompositeOperation = 'source-over'; 82 | ctx.lineWidth = 20; 83 | ctx.strokeStyle = 'rgba(255,255,255,1)'; 84 | }); 85 | YellowPen.addEventListener('click', (e) => { 86 | ctx.lineWidth = 20; 87 | ctx.globalCompositeOperation = 'source-over'; 88 | ctx.strokeStyle = 'rgba(255,255,0,0.1)'; 89 | }); 90 | Clear.addEventListener('click', (e) => { 91 | ctx.clearRect(0, 0, canvas.width, canvas.height); 92 | makeBgWhite(); 93 | }); 94 | Save.addEventListener('click', (e) => { 95 | download(); 96 | }); --------------------------------------------------------------------------------